prometeo-design-system 7.4.0 → 7.4.2

package/dist/AttachInput.es.js

@@ -1,14 +1,15 @@
-import { j as r } from "./jsx-runtime-GkKLlHH4.js";
-import { c as s } from "./cn-B6yFEsav.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 { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as o } from "./cn-B6yFEsav.js";
+import { memo as P, forwardRef as E, useCallback as G } from "react";
+import { useDropzone as H } 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 q } from "./Icons/UploadCloud.es.js";
-import { Info as K } from "./Icons/Info.es.js";
-const O = 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",
+import { UploadCloud as O } from "./Icons/UploadCloud.es.js";
+import { Info as U } from "./Icons/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: {
@@ -20,14 +21,14 @@ const O = i(
       disabled: !1
     }
   }
-), U = {
+), 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)]"
-}, W = (t, e, n) => n ? "disabled" : e === "active" ? "drag-active" : e === "reject" ? "drag-reject" : t, J = i(
+}, 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: {
@@ -40,14 +41,14 @@ const O = i(
       disabled: !1
     }
   }
-), L = i("icon-neutral-tertiary-default", {
+), X = i("icon-neutral-tertiary-default", {
   variants: {
     disabled: {
       true: "icon-disabled-default!",
       false: ""
     }
   }
-}), Q = i(
+}), Y = i(
   "prometeo-fonts-label-large flex items-center px-3 gap-0.5",
   {
     variants: {
@@ -66,81 +67,92 @@ const O = i(
       disabled: !1
     }
   }
-), X = (t) => {
-  const e = t / 1048576;
-  return e < 1 ? `${Math.round(t / 1024)} KB` : e < 1024 ? `${e % 1 === 0 ? e : e.toFixed(1)} MB` : `${(e / 1024).toFixed(1)} GB`;
-}, y = (t) => Object.keys(t).map((e) => t[e].join(", ")).join(" "), Y = (t, e, n) => {
-  if (t.some(
+), 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 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 = P(
+  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 = E(
   ({
-    onFilesAccepted: t,
+    onFilesAccepted: r,
     onFilesRejected: e,
     className: n,
     label: c,
-    subtitle: o = "Arrastra y suelta los archivos aquí, o haz clic para seleccionar",
+    subtitle: s = "Arrastra y suelta los archivos aquí, o haz clic para seleccionar",
     acceptedFormats: d,
     status: u,
     supportingText: f,
-    showSupportingText: w,
+    showSupportingText: z,
     disabled: a = !1,
     accept: m,
     maxFiles: h = 1,
-    maxSize: p,
-    ...M
-  }, C) => {
-    const D = E(
-      (g, j) => {
-        g.length > 0 && t?.(g), j.length > 0 && e?.(j);
+    maxSize: v,
+    cardBackground: b,
+    ...C
+  }, M) => {
+    const D = G(
+      (j, y) => {
+        j.length > 0 && r?.(j), y.length > 0 && e?.(y);
       },
-      [t, e]
+      [r, e]
     ), {
       getRootProps: V,
       getInputProps: $,
       isDragActive: k,
       isDragReject: A,
-      fileRejections: b
-    } = G({
+      fileRejections: g
+    } = H({
       onDrop: D,
       accept: m,
       maxFiles: h,
       disabled: a,
-      maxSize: p,
-      ...M
-    }), v = b.length > 0, l = v ? "error" : u ?? "default", x = Z(k, A), R = W(l, x, a), S = U[R], I = v ? Y([...b], h) : typeof f == "function" ? f() : f, z = d ?? y(m ?? {}), B = y(m ?? {});
-    return /* @__PURE__ */ r.jsxs("div", { className: s("w-full flex flex-col gap-1", n), children: [
-      c && /* @__PURE__ */ r.jsx(
+      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: Q({
+          className: Y({
             visualStatus: l,
             disabled: a
           }),
           children: c
         }
       ),
-      /* @__PURE__ */ r.jsxs(
+      /* @__PURE__ */ t.jsxs(
         "div",
         {
-          ref: C,
+          ref: M,
           ...V(),
-          className: O({ disabled: a }),
+          className: W({ disabled: a }),
           children: [
-            /* @__PURE__ */ r.jsx("input", { ...$() }),
-            /* @__PURE__ */ r.jsx(
+            /* @__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: s(
-                  "absolute inset-0 w-full h-full pointer-events-none overflow-visible transition-colors duration-200",
+                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__ */ r.jsx(
+                children: /* @__PURE__ */ t.jsx(
                   "rect",
                   {
                     x: "0.5",
@@ -156,51 +168,53 @@ const O = i(
                 )
               }
             ),
-            o && /* @__PURE__ */ r.jsx(
-              "p",
-              {
-                className: J({
-                  disabled: a
-                }),
-                children: o
-              }
-            ),
-            /* @__PURE__ */ r.jsx(
-              q,
+            s && /* @__PURE__ */ t.jsx("p", { className: o(Q({ disabled: a }), "relative z-[1]"), children: s }),
+            /* @__PURE__ */ t.jsx(
+              O,
               {
                 size: 20,
-                className: L({
-                  disabled: a
-                })
+                className: o(X({ disabled: a }), "relative z-[1]")
               }
             ),
-            !v && /* @__PURE__ */ r.jsxs("div", { className: "w-full overflow-hidden flex justify-center items-center gap-0.5", children: [
-              /* @__PURE__ */ r.jsxs("p", { className: s("prometeo-fonts-body-xsmall text-neutral-tertiary-default line-clamp-1", a && "text-disabled-default!"), children: [
-                z,
-                p !== void 0 && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                  " ",
-                  "· Máx. ",
-                  X(p)
-                ] })
-              ] }),
-              /* @__PURE__ */ r.jsx(H, { title: B, children: /* @__PURE__ */ r.jsx(
-                K,
+            !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: s("icon-neutral-tertiary-default shrink-0", a && "icon-disabled-default!")
+                  className: o(
+                    "icon-neutral-tertiary-default shrink-0",
+                    a && "icon-disabled-default!"
+                  )
                 }
               ) })
             ] })
           ]
         }
       ),
-      w && /* @__PURE__ */ r.jsx(_, { variant: l, disabled: a, className: s(l === "default" && !a && "[&>p]:text-neutral-tertiary-default! [&>svg]:icon-neutral-tertiary-default!"), children: I })
+      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 })
     ] });
   }
 );
-N.displayName = "AttachInput";
-const ie = T(N);
+w.displayName = "AttachInput";
+const ue = P(w);
 export {
-  ie as AttachInput,
-  ie as default
+  ue as AttachInput,
+  ue as default
 };

package/dist/Button.es.js

@@ -16,7 +16,7 @@ const W = (r) => Q(r), B = {
     icon: ""
   },
   large: {
-    container: "h-12 px-5 py-3 spacing-x-2 radius-medium ",
+    container: "h-12 px-5 py-3 spacing-x-2 radius-large ",
     icon: ""
   }
 }, e = {

package/dist/Card.es.js

@@ -1,112 +1,130 @@
-import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { createContext as N, useContext as j, memo as d, forwardRef as w, useMemo as z } from "react";
-import { c as s } from "./cn-B6yFEsav.js";
-import { c as i } from "./index-BOQuZ0gG.js";
-import F from "./CardBackground.es.js";
-const l = N(null);
-function C() {
-  const a = j(l);
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { createContext as z, useContext as w, memo as s, forwardRef as F, useMemo as H } from "react";
+import { c as i } from "./cn-B6yFEsav.js";
+import { c as d } from "./index-BOQuZ0gG.js";
+import V from "./CardBackground.es.js";
+const C = z(null);
+function m() {
+  const a = w(C);
   if (!a)
     throw new Error(
       "Card compound components (Card.Header, Card.Content, Card.Footer) must be used inside <Card>"
     );
   return a;
 }
-const H = i(
-  "relative overflow-hidden dropshadow-100 radius-medium border border-neutral-default-default p-3 shrink-0",
+const k = d(
+  "relative overflow-hidden dropshadow-100 radius-medium border border-neutral-default-default p-3 shrink-0 *:z-10",
   {
     variants: {
-      direction: {
+      orientation: {
         vertical: "flex flex-col",
         horizontal: "flex flex-row"
       }
     },
     defaultVariants: {
-      direction: "vertical"
+      orientation: "vertical"
     }
   }
-), V = i("shrink-0 z-10", {
+), b = d("shrink-0 z-10", {
   variants: {
-    direction: {
+    orientation: {
       vertical: "",
       horizontal: ""
     }
   }
-}), k = i("shrink-0 z-10", {
+}), y = d("shrink-0 z-10", {
   variants: {
-    direction: {
+    orientation: {
       vertical: "",
       horizontal: ""
     }
   }
-}), b = i("flex-1 min-h-0 min-w-0 z-10"), y = w(function({
+}), E = d("flex-1 min-h-0 min-w-0 z-10"), g = F(function({
   variant: r = "1-slot",
-  direction: t = "vertical",
-  cardBackground: e,
-  children: n,
-  className: x,
-  ...h
-}, v) {
-  const p = z(
-    () => ({ variant: r, direction: t }),
-    [r, t]
+  direction: t,
+  orientation: o,
+  cardBackground: n,
+  children: h,
+  className: v,
+  ...N
+}, p) {
+  const l = o ?? t ?? "vertical", j = H(
+    () => ({ orientation: l, variant: r }),
+    [l, r]
   );
-  return /* @__PURE__ */ o.jsx(l.Provider, { value: p, children: /* @__PURE__ */ o.jsxs(
+  return /* @__PURE__ */ e.jsx(C.Provider, { value: j, children: /* @__PURE__ */ e.jsxs(
     "div",
     {
-      ref: v,
-      className: s(H({ direction: t }), x),
-      ...h,
+      ref: p,
+      className: i(
+        k({ orientation: l }),
+        v
+      ),
+      ...N,
       children: [
-        /* @__PURE__ */ o.jsx(
-          F,
+        /* @__PURE__ */ e.jsx(
+          V,
           {
-            ...e,
-            className: s(
+            ...n,
+            className: i(
               "inset-0 absolute z-0",
-              e?.className
+              n?.className
             )
           }
         ),
-        n
+        h
       ]
     }
   ) });
-}), m = d(function({
+}), u = s(function({
   children: r,
   className: t,
-  ...e
+  ...o
 }) {
-  const { direction: n } = C();
-  return /* @__PURE__ */ o.jsx("div", { className: s(V({ direction: n }), t), ...e, children: r });
-}), u = d(function({
+  const { orientation: n } = m();
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: i(b({ orientation: n }), t),
+      ...o,
+      children: r
+    }
+  );
+}), f = s(function({
   children: r,
   className: t,
-  ...e
+  ...o
 }) {
-  return /* @__PURE__ */ o.jsx("div", { className: s(b(), t), ...e, children: r });
-}), f = d(function({
+  return /* @__PURE__ */ e.jsx("div", { className: i(E(), t), ...o, children: r });
+}), x = s(function({
   children: r,
   className: t,
-  ...e
+  ...o
 }) {
-  const { direction: n } = C();
-  return /* @__PURE__ */ o.jsx("div", { className: s(k({ direction: n }), t), ...e, children: r });
+  const { orientation: n } = m();
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: i(y({ orientation: n }), t),
+      ...o,
+      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;
+function B(a, r) {
+  return a.variant === r.variant && a.direction === r.direction && a.orientation === r.orientation && a.className === r.className && a.children === r.children && a.cardBackground === r.cardBackground;
 }
-const c = d(y, E);
-c.Header = m;
-c.Content = u;
-c.Footer = f;
+const c = s(g, B);
+c.Header = u;
+c.Content = f;
+c.Footer = x;
 c.displayName = "Card";
-m.displayName = "Card.Header";
-u.displayName = "Card.Content";
-f.displayName = "Card.Footer";
+u.displayName = "Card.Header";
+f.displayName = "Card.Content";
+x.displayName = "Card.Footer";
 export {
   c as Card,
-  u as CardContent,
-  f as CardFooter,
-  m as CardHeader
+  f as CardContent,
+  x as CardFooter,
+  u as CardHeader
 };

package/dist/Collapsible.css

@@ -0,0 +1 @@
+.pyrion-collapsible-content[data-orientation=vertical]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out,opacity .1s ease-in;opacity:0}.pyrion-collapsible-content[data-orientation=vertical][data-expanded=true]{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .25s ease-out,opacity .15s ease-out 50ms}.pyrion-collapsible-content[data-orientation=horizontal]{display:grid;grid-template-columns:0fr;transition:grid-template-columns .25s ease-out,opacity .1s ease-in;opacity:0}.pyrion-collapsible-content[data-orientation=horizontal][data-expanded=true]{grid-template-columns:1fr;opacity:1;transition:grid-template-columns .25s ease-out,opacity .15s ease-out 50ms}.pyrion-collapsible-inner{overflow:hidden}.pyrion-collapsible-content[data-orientation=vertical] .pyrion-collapsible-inner{min-height:0}.pyrion-collapsible-content[data-orientation=horizontal] .pyrion-collapsible-inner{min-width:0}.pyrion-collapsible-trigger{display:flex;align-items:center;cursor:pointer;background:none;border:none;padding:0;width:100%;text-align:left;color:inherit;font:inherit}.pyrion-collapsible-trigger:disabled{cursor:not-allowed;opacity:.4}.pyrion-collapsible-trigger svg{transition:transform .25s ease;flex-shrink:0}.pyrion-collapsible-trigger[data-expanded=true] svg{transform:rotate(180deg)}.pyrion-collapsible-trigger[data-orientation=horizontal][data-expanded=true] svg{transform:rotate(90deg)}

package/dist/Collapsible.d.ts

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

package/dist/Collapsible.es.js

@@ -0,0 +1,78 @@
+import { j as i } from "./jsx-runtime-GkKLlHH4.js";
+import { createContext as g, useContext as j, memo as v, useState as y, useCallback as O } from "react";
+const u = g(null);
+function d() {
+  const e = j(u);
+  if (!e)
+    throw new Error(
+      "Collapsible sub-components must be used inside <Collapsible>"
+    );
+  return e;
+}
+function N({
+  orientation: e = "vertical",
+  defaultOpen: t = !1,
+  open: n,
+  onOpenChange: o,
+  disabled: l = !1,
+  children: s,
+  className: a
+}) {
+  const r = n !== void 0, [x, m] = y(t), p = r ? n : x, f = O(() => {
+    if (l) return;
+    const c = !p;
+    r || m(c), o?.(c);
+  }, [l, r, p, o]);
+  return /* @__PURE__ */ i.jsx(
+    u.Provider,
+    {
+      value: { isOpen: p, toggle: f, orientation: e, disabled: l },
+      children: /* @__PURE__ */ i.jsx("div", { className: a, children: s })
+    }
+  );
+}
+function C({
+  children: e,
+  className: t,
+  ...n
+}) {
+  const { isOpen: o, toggle: l, orientation: s, disabled: a } = d();
+  return /* @__PURE__ */ i.jsx(
+    "button",
+    {
+      type: "button",
+      className: `pyrion-collapsible-trigger${t ? ` ${t}` : ""}`,
+      onClick: l,
+      disabled: a,
+      "aria-expanded": o,
+      "data-expanded": o,
+      "data-orientation": s,
+      ...n,
+      children: e
+    }
+  );
+}
+function b({ children: e, className: t }) {
+  const { isOpen: n, orientation: o } = d();
+  return /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `pyrion-collapsible-content${t ? ` ${t}` : ""}`,
+      "data-expanded": n,
+      "data-orientation": o,
+      ...n ? {} : { inert: !0 },
+      children: /* @__PURE__ */ i.jsx("div", { className: "pyrion-collapsible-inner", children: e })
+    }
+  );
+}
+const $ = Object.assign(v(N), {
+  Trigger: C,
+  Content: b
+});
+$.displayName = "Collapsible";
+C.displayName = "Collapsible.Trigger";
+b.displayName = "Collapsible.Content";
+export {
+  $ as Collapsible,
+  $ as default
+};