@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.50

package/dist/components/ImageUpload/ImageUpload.js

@@ -0,0 +1,221 @@
+import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { useId as ee, useRef as j, useState as g, useEffect as te } from "react";
+import { S as ae } from "../../loader-juvMSJ9L.js";
+import { Button as F } from "../Button/Button.js";
+import { cn as m } 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 { c as ce } from "../../createLucideIcon-D4r5Phnh.js";
+import { Warning as oe } from "../../assets/icons/components/Warning.js";
+import { X as D } from "../../x-BXShoIAM.js";
+const de = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
+  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
+  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
+], me = ce("image", de);
+var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
+const pe = ({
+  className: s,
+  error: b,
+  fileName: T,
+  fileSize: E,
+  fileUrl: z,
+  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: L = !1,
+  label: p = "Item logo",
+  labelClassName: P,
+  name: A,
+  onChange: k,
+  onRemove: H,
+  status: N = t.Default,
+  theme: u,
+  uploadButtonText: J = "Upload logo",
+  accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
+  maxSize: K = 5 * 1024 * 1024
+}) => {
+  const U = ee(), f = j(null), n = j(null), [W, c] = g(N), [_, B] = g(z), [$, C] = g(T), [X, G] = g(E);
+  te(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const a = N !== t.Default ? N : W, y = z ?? _, o = T ?? $, h = E ?? X, x = !!b || a === t.Error, q = (i) => {
+    const r = i.target.files?.[0];
+    if (!r) return;
+    if (!M.split(",").map((d) => d.trim()).some((d) => {
+      if (d.includes("*")) {
+        const Z = d.split("/")[0];
+        return r.type.startsWith(Z);
+      }
+      return r.type === d;
+    })) {
+      c(t.Error), k?.(i);
+      return;
+    }
+    if (r.size > K) {
+      c(t.Error), k?.(i);
+      return;
+    }
+    c(t.Uploading), C(r.name), G(Q(r.size));
+    const v = new FileReader();
+    v.onloadend = () => {
+      B(v.result), n.current = setTimeout(() => {
+        c(t.Complete);
+      }, 500);
+    }, v.readAsDataURL(r), k?.(i);
+  }, V = () => {
+    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), c(t.Default), f.current && (f.current.value = ""), H?.();
+  }, O = () => {
+    f.current?.click();
+  }, Q = (i) => {
+    if (i === 0) return "0 Bytes";
+    const r = 1024, I = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
+    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${I[w]}`;
+  }, Y = 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: m(
+        ne({
+          status: a,
+          className: s
+        })
+      ),
+      "data-theme": u,
+      children: [
+        p && /* @__PURE__ */ l(
+          "label",
+          {
+            htmlFor: U,
+            className: m(
+              re({
+                className: P
+              }),
+              "cursor-pointer"
+            ),
+            children: [
+              p,
+              L && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: m(
+              ie({
+                status: a
+              })
+            ),
+            children: [
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: m(
+                    le({
+                      status: a
+                    }),
+                    {
+                      "justify-between": x,
+                      "justify-start": !x
+                    }
+                  ),
+                  children: [
+                    a === t.Uploading && /* @__PURE__ */ l(S, { children: [
+                      /* @__PURE__ */ e(ae, { className: "w-5 h-5 shrink-0 animate-spin text-metal-400" }),
+                      o && /* @__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: o }),
+                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
+                      ] })
+                    ] }),
+                    a === t.Complete && y && /* @__PURE__ */ l(S, { children: [
+                      /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: y,
+                          alt: o || "Uploaded image",
+                          className: "w-full h-full object-contain"
+                        }
+                      ) }),
+                      o && /* @__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: o }),
+                        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 && !y) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(me, { 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(oe, { 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: O,
+                  theme: u,
+                  className: "h-10 px-4 py-2 shrink-0",
+                  children: J
+                }
+              ),
+              a === t.Uploading && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: V,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Cancel upload",
+                  children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+                }
+              ),
+              a === t.Complete && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: V,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Remove file",
+                  children: /* @__PURE__ */ e(D, { 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: m(
+                se({
+                  status: a
+                })
+              ),
+              children: Y
+            }
+          ) }),
+          (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: A,
+            accept: M,
+            onChange: q,
+            className: "hidden",
+            "aria-label": typeof p == "string" ? p : "File upload"
+          }
+        )
+      ]
+    }
+  );
+};
+pe.displayName = "KonstructImageUpload";
+export {
+  pe as ImageUpload
+};

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

@@ -0,0 +1,109 @@
+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([
+  "flex",
+  "gap-1",
+  "items-center",
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "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"
+    }
+  }
+);
+export {
+  d as helperTextVariants,
+  a as imageUploadVariants,
+  r as inputContainerVariants,
+  s as inputFieldVariants,
+  l as labelVariants
+};