prometeo-design-system 7.2.4 → 7.2.5

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,206 @@
+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-BFzIO-0g.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",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default",
+        false: "hover:cursor-pointer group"
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), U = {
+  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(
+  "prometeo-fonts-body-medium text-balanced text-neutral-secondary-default",
+  {
+    variants: {
+      disabled: {
+        true: "text-disabled-default!",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), L = i("icon-neutral-tertiary-default", {
+  variants: {
+    disabled: {
+      true: "icon-disabled-default!",
+      false: ""
+    }
+  }
+}), Q = 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
+    }
+  }
+), 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(
+    (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 = H(
+  ({
+    onFilesAccepted: t,
+    onFilesRejected: e,
+    className: n,
+    label: c,
+    subtitle: o = "Arrastra y suelta los archivos aquí, o haz clic para seleccionar",
+    acceptedFormats: d,
+    status: u,
+    supportingText: f,
+    showSupportingText: w,
+    disabled: a = !1,
+    accept: m,
+    maxFiles: h = 1,
+    maxSize: p,
+    ...M
+  }, C) => {
+    const D = P(
+      (g, j) => {
+        g.length > 0 && t?.(g), j.length > 0 && e?.(j);
+      },
+      [t, e]
+    ), {
+      getRootProps: V,
+      getInputProps: $,
+      isDragActive: k,
+      isDragReject: A,
+      fileRejections: b
+    } = E({
+      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(
+        "label",
+        {
+          className: Q({
+            visualStatus: l,
+            disabled: a
+          }),
+          children: c
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          ref: C,
+          ...V(),
+          className: O({ disabled: a }),
+          children: [
+            /* @__PURE__ */ r.jsx("input", { ...$() }),
+            /* @__PURE__ */ r.jsx(
+              "svg",
+              {
+                "aria-hidden": !0,
+                className: s(
+                  "absolute inset-0 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(
+                  "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
+                  }
+                )
+              }
+            ),
+            o && /* @__PURE__ */ r.jsx(
+              "p",
+              {
+                className: J({
+                  disabled: a
+                }),
+                children: o
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              q,
+              {
+                size: 20,
+                className: L({
+                  disabled: a
+                })
+              }
+            ),
+            !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(G, { title: B, children: /* @__PURE__ */ r.jsx(
+                K,
+                {
+                  size: 12,
+                  className: s("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 })
+    ] });
+  }
+);
+N.displayName = "AttachInput";
+const ie = T(N);
+export {
+  ie as AttachInput,
+  ie as default
+};