@fangzsx/component-library 0.0.36 → 0.0.37

package/dist/Close-pjIlDyCW.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "./createSvgIcon-C0YrvByi.js";
+const c = r(/* @__PURE__ */ o("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close");
+export {
+  c as C
+};

package/dist/components/Dialog/index.js

@@ -1,33 +1,31 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { c as x } from "../../createSvgIcon-C0YrvByi.js";
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { C as x } from "../../Close-pjIlDyCW.js";
 import { Slide as d, Dialog as u, DialogTitle as g, IconButton as h, DialogContent as D, DialogActions as C } from "@mui/material";
-import { forwardRef as S } from "react";
-const j = x(/* @__PURE__ */ t("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close"), y = S(function(i, e) {
-  return /* @__PURE__ */ t(d, { direction: "up", ref: e, ...i });
+import { forwardRef as j } from "react";
+const y = j(function(t, o) {
+  return /* @__PURE__ */ i(d, { direction: "up", ref: o, ...t });
 });
-function v({
-  open: o,
-  onClose: i,
-  title: e,
+function w({
+  open: e,
+  onClose: t,
+  title: o,
   children: l,
   actions: r,
   maxWidth: s = "sm",
   fullWidth: a = !0,
   showCloseButton: p = !0,
-  dividers: c = !0,
-  fullScreen: m = !1,
+  dividers: m = !0,
+  fullScreen: c = !1,
   slideTransition: f = !1
 }) {
   return /* @__PURE__ */ n(
     u,
     {
-      open: o,
-      onClose: i,
+      open: e,
+      onClose: t,
       maxWidth: s,
       fullWidth: a,
-      fullScreen: m,
+      fullScreen: c,
       scroll: "paper",
       slots: f ? { transition: y } : void 0,
       sx: {
@@ -49,23 +47,23 @@ function v({
           fontSize: "19px",
           pr: 1
         }, children: [
-          e,
-          p && /* @__PURE__ */ t(
+          o,
+          p && /* @__PURE__ */ i(
             h,
             {
-              onClick: i,
+              onClick: t,
               size: "small",
               sx: { ml: 2 },
-              children: /* @__PURE__ */ t(j, {})
+              children: /* @__PURE__ */ i(x, {})
             }
           )
         ] }),
-        /* @__PURE__ */ t(D, { dividers: c, children: l }),
-        r && /* @__PURE__ */ t(C, { sx: { px: 3, py: 2 }, children: r })
+        /* @__PURE__ */ i(D, { dividers: m, children: l }),
+        r && /* @__PURE__ */ i(C, { sx: { px: 3, py: 2 }, children: r })
       ]
     }
   );
 }
 export {
-  v as ScrollableDialog
+  w as ScrollableDialog
 };

package/dist/components/ImageUpload/index.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+interface ImageUploadProps {
+    label?: string;
+    required?: boolean;
+    maxSizeMB?: number;
+    acceptedFormats?: string[];
+    error?: string;
+    forceError?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    onChange?: (file: File | null, error: string) => void;
+}
+declare const ImageUpload: React.FC<ImageUploadProps>;
+export default ImageUpload;

package/dist/components/ImageUpload/index.js

@@ -0,0 +1,218 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { C as H } from "../../Close-pjIlDyCW.js";
+import { c as M } from "../../createSvgIcon-C0YrvByi.js";
+import { FormControl as P, FormLabel as T, Box as i, Stack as U, Typography as l, IconButton as V, FormHelperText as E } from "@mui/material";
+import { useState as g, useRef as q, useCallback as G } from "react";
+const J = M(/* @__PURE__ */ e("path", {
+  d: "M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86-3 3.87L9 13.14 6 17h12z"
+}), "ImageOutlined"), K = (n) => {
+  const a = n.lastIndexOf(".");
+  return a <= 0 ? { baseName: n, extension: "" } : {
+    baseName: n.slice(0, a),
+    extension: n.slice(a)
+  };
+}, rr = ({
+  label: n = "Logo",
+  required: a = !0,
+  maxSizeMB: d = 2,
+  acceptedFormats: s = ["png", "jpg", "jpeg"],
+  error: x = "",
+  forceError: y = !1,
+  helperText: b,
+  disabled: o = !1,
+  onChange: c
+}) => {
+  const [v, h] = g(!1), [p, k] = g(null), [O, D] = g(""), m = q(null), w = d * 1024 * 1024, R = s.map((r) => `.${r}`).join(","), C = s.map(
+    (r) => `image/${r === "jpg" ? "jpeg" : r}`
+  ), j = G(
+    (r) => {
+      if (!r) return;
+      if (!C.some((f) => r.type === f)) {
+        c?.(null, `Only ${s.join(", ")} files are supported`);
+        return;
+      }
+      if (r.size > w) {
+        c?.(null, `File size must be less than ${d}MB`);
+        return;
+      }
+      const I = new FileReader();
+      I.onload = (f) => {
+        k(f.target?.result), D(r.name), c?.(r, "");
+      }, I.readAsDataURL(r);
+    },
+    [C, w, d, s, c]
+  ), S = (r) => {
+    r.preventDefault(), !o && (h(!1), j(r.dataTransfer.files?.[0] ?? null));
+  }, F = (r) => {
+    r.preventDefault(), o || h(!0);
+  }, L = () => h(!1), W = () => {
+    o || m.current?.click();
+  }, z = (r) => {
+    j(r.target.files?.[0] ?? null);
+  }, N = (r) => {
+    r.stopPropagation(), k(null), D(""), c?.(null, ""), m.current && (m.current.value = "");
+  }, u = !!x || y && !p, B = x || (y && !p ? `${n} can't be empty` : ""), { baseName: $, extension: A } = K(O);
+  return /* @__PURE__ */ t(P, { fullWidth: !0, error: u, disabled: o, children: [
+    n && /* @__PURE__ */ e(
+      T,
+      {
+        required: a,
+        sx: {
+          mb: 0.75,
+          fontSize: 14,
+          fontWeight: 500,
+          color: "text.primary",
+          "& .MuiFormLabel-asterisk": { color: "error.main" },
+          "&.Mui-focused": { color: "text.primary" },
+          "&.Mui-error": { color: "text.primary" }
+        },
+        children: n
+      }
+    ),
+    /* @__PURE__ */ t(
+      i,
+      {
+        onClick: W,
+        onDrop: S,
+        onDragOver: F,
+        onDragLeave: L,
+        sx: {
+          border: 2,
+          borderStyle: "dashed",
+          borderColor: u ? "error.main" : v ? "primary.main" : "grey.300",
+          borderRadius: 2,
+          p: p ? 1.5 : 4,
+          textAlign: "center",
+          cursor: o ? "default" : "pointer",
+          bgcolor: o ? "action.disabledBackground" : v ? "primary.50" : "grey.50",
+          transition: "all 0.2s ease",
+          opacity: o ? 0.6 : 1,
+          "&:hover": o ? {} : {
+            borderColor: u ? "error.main" : "primary.main",
+            bgcolor: "primary.50"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: m,
+              type: "file",
+              accept: R,
+              onChange: z,
+              hidden: !0,
+              disabled: o
+            }
+          ),
+          p ? /* @__PURE__ */ t(U, { direction: "row", alignItems: "center", spacing: 2, children: [
+            /* @__PURE__ */ e(
+              i,
+              {
+                component: "img",
+                src: p,
+                alt: "Preview",
+                sx: {
+                  width: 80,
+                  height: 80,
+                  objectFit: "contain",
+                  borderRadius: 1.5,
+                  border: 1,
+                  borderColor: "grey.200"
+                }
+              }
+            ),
+            /* @__PURE__ */ t(i, { sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+              /* @__PURE__ */ t(
+                l,
+                {
+                  variant: "body2",
+                  fontWeight: 500,
+                  sx: {
+                    display: "flex",
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        component: "span",
+                        sx: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          minWidth: 0
+                        },
+                        children: $
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        component: "span",
+                        sx: {
+                          flexShrink: 0
+                        },
+                        children: A
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(l, { variant: "caption", color: "text.secondary", children: "Click to replace" })
+            ] }),
+            /* @__PURE__ */ e(
+              V,
+              {
+                onClick: N,
+                size: "small",
+                color: "error",
+                sx: {
+                  border: 1,
+                  borderColor: "grey.200",
+                  borderRadius: 1.5,
+                  "&:hover": { bgcolor: "error.50", borderColor: "error.200" }
+                },
+                children: /* @__PURE__ */ e(H, { fontSize: "small" })
+              }
+            )
+          ] }) : /* @__PURE__ */ t(i, { children: [
+            /* @__PURE__ */ e(
+              J,
+              {
+                sx: { fontSize: 40, color: "primary.main", mb: 1.5 }
+              }
+            ),
+            /* @__PURE__ */ t(l, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: [
+              "Drop image here or",
+              " ",
+              /* @__PURE__ */ e(
+                l,
+                {
+                  component: "span",
+                  variant: "body2",
+                  color: "primary",
+                  fontWeight: 600,
+                  sx: { textDecoration: "underline" },
+                  children: "click to browse"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "File size should be less than ",
+              d,
+              "MB"
+            ] }),
+            /* @__PURE__ */ t(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "Supports ",
+              s.join(", ")
+            ] })
+          ] })
+        ]
+      }
+    ),
+    (u || b) && /* @__PURE__ */ e(E, { sx: { mt: 0.75, mx: 0 }, children: B || b })
+  ] });
+};
+export {
+  rr as default
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.36",
+  "version": "0.0.37",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",