@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,223 +1,4 @@
-import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useId as te, useRef as D, useState as g, useEffect as ae } from "react";
-import { Button as F } from "../Button/Button.js";
-import { cn as c } from "../../utils/index.js";
-import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
-import { LoaderIcon as ce } from "../../assets/icons/components/Loader.js";
-import { PhotoLibraryIcon as oe } from "../../assets/icons/components/PhotoLibrary.js";
-import { WarningIcon as de } from "../../assets/icons/components/Warning.js";
-import { X as P } from "../../x-B9bYxG31.js";
-var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
-const me = ({
-  className: s,
-  error: b,
-  fileName: T,
-  fileSize: z,
-  fileUrl: E,
-  helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.",
-  isRequired: S = !1,
-  label: p = "Item logo",
-  labelClassName: L,
-  labelWrapperClassName: A,
-  name: H,
-  onChange: N,
-  onRemove: J,
-  status: k = t.Default,
-  theme: u,
-  uploadButtonText: K = "Upload logo",
-  accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
-  maxSize: W = 5 * 1024 * 1024
-}) => {
-  const U = te(), f = D(null), n = D(null), [$, o] = g(k), [X, B] = g(E), [q, C] = g(T), [O, G] = g(z);
-  ae(() => () => {
-    n.current && clearTimeout(n.current);
-  }, []);
-  const a = k !== t.Default ? k : $, v = E ?? X, d = T ?? q, h = z ?? O, x = !!b || a === t.Error, Q = (i) => {
-    const r = i.target.files?.[0];
-    if (!r) return;
-    if (!M.split(",").map((m) => m.trim()).some((m) => {
-      if (m.includes("*")) {
-        const ee = m.split("/")[0];
-        return r.type.startsWith(ee);
-      }
-      return r.type === m;
-    })) {
-      o(t.Error), N?.(i);
-      return;
-    }
-    if (r.size > W) {
-      o(t.Error), N?.(i);
-      return;
-    }
-    o(t.Uploading), C(r.name), G(Z(r.size));
-    const y = new FileReader();
-    y.onloadend = () => {
-      B(y.result), n.current = setTimeout(() => {
-        o(t.Complete);
-      }, 500);
-    }, y.readAsDataURL(r), N?.(i);
-  }, I = () => {
-    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), J?.();
-  }, Y = () => {
-    f.current?.click();
-  }, Z = (i) => {
-    if (i === 0) return "0 Bytes";
-    const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
-    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
-  }, _ = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: c(
-        ne({
-          status: a,
-          className: s
-        })
-      ),
-      "data-theme": u,
-      children: [
-        p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l(
-          "label",
-          {
-            htmlFor: U,
-            className: c(
-              re({
-                className: L
-              }),
-              "cursor-pointer"
-            ),
-            children: [
-              p,
-              S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ l(
-          "div",
-          {
-            className: c(
-              ie({
-                status: a
-              })
-            ),
-            children: [
-              /* @__PURE__ */ l(
-                "div",
-                {
-                  className: c(
-                    le({
-                      status: a
-                    }),
-                    {
-                      "justify-between": x,
-                      "justify-start": !x
-                    }
-                  ),
-                  children: [
-                    a === t.Uploading && /* @__PURE__ */ l(j, { children: [
-                      /* @__PURE__ */ e(
-                        ce,
-                        {
-                          size: 20,
-                          className: "shrink-0 animate-spin text-metal-400"
-                        }
-                      ),
-                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
-                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
-                      ] })
-                    ] }),
-                    a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
-                      /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: v,
-                          alt: d || "Uploaded image",
-                          className: "w-full h-full object-contain"
-                        }
-                      ) }),
-                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
-                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
-                      ] })
-                    ] }),
-                    (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
-                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
-                  ]
-                }
-              ),
-              (a === t.Default || a === t.Error) && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  onClick: Y,
-                  theme: u,
-                  className: "h-10 px-4 py-2 shrink-0",
-                  children: K
-                }
-              ),
-              a === t.Uploading && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  shape: "circle",
-                  size: "medium",
-                  onClick: I,
-                  theme: u,
-                  className: "shrink-0",
-                  "aria-label": "Cancel upload",
-                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
-                }
-              ),
-              a === t.Complete && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  shape: "circle",
-                  size: "medium",
-                  onClick: I,
-                  theme: u,
-                  className: "shrink-0",
-                  "aria-label": "Remove file",
-                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex w-full gap-2", children: [
-          /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
-            "p",
-            {
-              className: c(
-                se({
-                  status: a
-                })
-              ),
-              children: _
-            }
-          ) }),
-          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
-          a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
-        ] }),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ref: f,
-            id: U,
-            type: "file",
-            name: H,
-            accept: M,
-            onChange: Q,
-            className: "hidden",
-            "aria-label": typeof p == "string" ? p : "File upload"
-          }
-        )
-      ]
-    }
-  );
-};
-me.displayName = "KonstructImageUpload";
+import { t as a } from "../../ImageUpload-BzXjGZ2w.js";
 export {
-  me as ImageUpload
+  a as ImageUpload
 };

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -1,70 +1,60 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t(
-  ["flex", "flex-col", "gap-2", "w-full"],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: ""
-      }
-    },
-    defaultVariants: {
-      status: "default"
-    }
-  }
-), r = t(
-  ["flex", "gap-2", "h-15", "items-center", "w-full"],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: ""
-      }
-    },
-    defaultVariants: {
-      status: "default"
-    }
-  }
-), s = t(
-  [
-    "flex",
-    "gap-4",
-    "grow",
-    "h-full",
-    "items-center",
-    "px-4",
-    "py-2",
-    "rounded",
-    "border",
-    "bg-white",
-    "border-gray-300",
-    "dark:bg-metal-800",
-    "dark:border-metal-700",
-    "kubefirst-dark:bg-slate-800",
-    "kubefirst-dark:border-slate-600"
-  ],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: [
-          "border-red-600",
-          "dark:border-red-500",
-          "kubefirst-dark:border-red-500"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "default"
-    }
-  }
-), l = t([
+import { t } from "../../dist-DtEbXv47.js";
+var a = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: ""
+  } },
+  defaultVariants: { status: "default" }
+}), r = t([
+  "flex",
+  "gap-2",
+  "h-15",
+  "items-center",
+  "w-full"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: ""
+  } },
+  defaultVariants: { status: "default" }
+}), l = t([
+  "flex",
+  "gap-4",
+  "grow",
+  "h-full",
+  "items-center",
+  "px-4",
+  "py-2",
+  "rounded",
+  "border",
+  "bg-white",
+  "border-gray-300",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "kubefirst-dark:bg-slate-800",
+  "kubefirst-dark:border-slate-600"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: [
+      "border-red-600",
+      "dark:border-red-500",
+      "kubefirst-dark:border-red-500"
+    ]
+  } },
+  defaultVariants: { status: "default" }
+}), s = t([
   "flex",
   "gap-1",
   "items-center",
@@ -74,36 +64,29 @@ const a = t(
   "text-slate-500",
   "dark:text-slate-50",
   "kubefirst-dark:text-slate-50"
-]), d = t(
-  [
-    "text-xs",
-    "leading-5",
-    "text-slate-600",
-    "dark:text-slate-200",
-    "kubefirst-dark:text-slate-200"
-  ],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: [
-          "text-red-700",
-          "dark:text-red-400",
-          "kubefirst-dark:text-red-500"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "default"
-    }
-  }
-);
+]), d = t([
+  "text-xs",
+  "leading-5",
+  "text-slate-600",
+  "dark:text-slate-200",
+  "kubefirst-dark:text-slate-200"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: [
+      "text-red-700",
+      "dark:text-red-400",
+      "kubefirst-dark:text-red-500"
+    ]
+  } },
+  defaultVariants: { status: "default" }
+});
 export {
   d as helperTextVariants,
   a as imageUploadVariants,
   r as inputContainerVariants,
-  s as inputFieldVariants,
-  l as labelVariants
+  l as inputFieldVariants,
+  s as labelVariants
 };