@fangzsx/component-library 0.0.36 → 0.0.38

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,13 @@
+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;
+}
+export declare function ImageUpload({ label, required, maxSizeMB, acceptedFormats, error, forceError, helperText, disabled, onChange, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ImageUpload/index.js

@@ -0,0 +1,229 @@
+import { jsx as e, jsxs as n } 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");
+function K(t) {
+  const a = t.lastIndexOf(".");
+  return a <= 0 ? { baseName: t, extension: "" } : {
+    baseName: t.slice(0, a),
+    extension: t.slice(a)
+  };
+}
+function rr({
+  label: t = "Logo",
+  required: a = !0,
+  maxSizeMB: u = 2,
+  acceptedFormats: c = ["png", "jpg", "jpeg"],
+  error: x = "",
+  forceError: y = !1,
+  helperText: b,
+  disabled: o = !1,
+  onChange: s
+}) {
+  const [v, f] = g(!1), [p, k] = g(null), [O, D] = g(""), d = q(null), w = u * 1024 * 1024, R = c.map((r) => `.${r}`).join(","), C = c.map(
+    (r) => `image/${r === "jpg" ? "jpeg" : r}`
+  ), j = G(
+    function(r) {
+      if (!r) return;
+      if (!C.some((h) => r.type === h)) {
+        s?.(null, `Only ${c.join(", ")} files are supported`);
+        return;
+      }
+      if (r.size > w) {
+        s?.(null, `File size must be less than ${u}MB`);
+        return;
+      }
+      const I = new FileReader();
+      I.onload = function(h) {
+        k(h.target?.result), D(r.name), s?.(r, "");
+      }, I.readAsDataURL(r);
+    },
+    [C, w, u, c, s]
+  );
+  function S(r) {
+    r.preventDefault(), !o && (f(!1), j(r.dataTransfer.files?.[0] ?? null));
+  }
+  function F(r) {
+    r.preventDefault(), o || f(!0);
+  }
+  function L() {
+    f(!1);
+  }
+  function W() {
+    o || d.current?.click();
+  }
+  function z(r) {
+    j(r.target.files?.[0] ?? null);
+  }
+  function N(r) {
+    r.stopPropagation(), k(null), D(""), s?.(null, ""), d.current && (d.current.value = "");
+  }
+  const m = !!x || y && !p, B = x || (y && !p ? `${t} can't be empty` : ""), { baseName: $, extension: A } = K(O);
+  return /* @__PURE__ */ n(P, { fullWidth: !0, error: m, disabled: o, children: [
+    t && /* @__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: t
+      }
+    ),
+    /* @__PURE__ */ n(
+      i,
+      {
+        onClick: W,
+        onDrop: S,
+        onDragOver: F,
+        onDragLeave: L,
+        sx: {
+          border: 2,
+          borderStyle: "dashed",
+          borderColor: m ? "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: m ? "error.main" : "primary.main",
+            bgcolor: "primary.50"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: d,
+              type: "file",
+              accept: R,
+              onChange: z,
+              hidden: !0,
+              disabled: o
+            }
+          ),
+          p ? /* @__PURE__ */ n(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__ */ n(i, { sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+              /* @__PURE__ */ n(
+                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__ */ n(i, { children: [
+            /* @__PURE__ */ e(
+              J,
+              {
+                sx: { fontSize: 40, color: "primary.main", mb: 1.5 }
+              }
+            ),
+            /* @__PURE__ */ n(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__ */ n(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "File size should be less than ",
+              u,
+              "MB"
+            ] }),
+            /* @__PURE__ */ n(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "Supports ",
+              c.join(", ")
+            ] })
+          ] })
+        ]
+      }
+    ),
+    (m || b) && /* @__PURE__ */ e(E, { sx: { mt: 0.75, mx: 0 }, children: B || b })
+  ] });
+}
+export {
+  rr as ImageUpload
+};

package/dist/main.d.ts

@@ -7,6 +7,7 @@ export { CheckboxGroup } from './components/CheckboxGroup';
 export { Dropdown } from './components/Dropdown';
 export { DropdownOptions } from './components/DropdownOptions';
 export { FlatBanner } from './components/FlatBanner';
+export { ImageUpload } from './components/ImageUpload';
 export { Label } from './components/Label';
 export { LinearProgress } from './components/LinearProgress';
 export { MediaCardWithAction } from './components/MediaCardWithAction';

package/dist/main.js

@@ -1,38 +1,40 @@
 import { AppBarPublic as e } from "./components/AppBarPublic/index.js";
 import { Banner as p } from "./components/Banner/index.js";
 import { B as m } from "./index-Dnsx2wLn.js";
-import { CheckBox as n } from "./components/Checkbox/index.js";
-import { ScrollableDialog as i } from "./components/Dialog/index.js";
+import { CheckBox as a } from "./components/Checkbox/index.js";
+import { ScrollableDialog as d } from "./components/Dialog/index.js";
 import { CheckboxGroup as l } from "./components/CheckboxGroup/index.js";
 import { Dropdown as B } from "./components/Dropdown/index.js";
 import { DropdownOptions as s } from "./components/DropdownOptions/index.js";
 import { FlatBanner as D } from "./components/FlatBanner/index.js";
-import { Label as h } from "./components/Label/index.js";
-import { LinearProgress as g } from "./components/LinearProgress/index.js";
-import { MediaCardWithAction as A } from "./components/MediaCardWithAction/index.js";
-import { PhoneAndCountryDropdown as F } from "./components/PhoneAndCountryDropdown/index.js";
-import { PromoCode as L } from "./components/PromoCode/index.js";
-import { RadioButtonGroup as T } from "./components/RadioButtonGroup/index.js";
-import { Stepper as I } from "./components/Stepper/index.js";
-import { Text as O } from "./components/Text/index.js";
-import { TextFieldInput as W } from "./components/TextFieldInput/index.js";
+import { ImageUpload as g } from "./components/ImageUpload/index.js";
+import { Label as P } from "./components/Label/index.js";
+import { LinearProgress as A } from "./components/LinearProgress/index.js";
+import { MediaCardWithAction as F } from "./components/MediaCardWithAction/index.js";
+import { PhoneAndCountryDropdown as I } from "./components/PhoneAndCountryDropdown/index.js";
+import { PromoCode as S } from "./components/PromoCode/index.js";
+import { RadioButtonGroup as y } from "./components/RadioButtonGroup/index.js";
+import { Stepper as O } from "./components/Stepper/index.js";
+import { Text as U } from "./components/Text/index.js";
+import { TextFieldInput as j } from "./components/TextFieldInput/index.js";
 export {
   e as AppBarPublic,
   p as Banner,
   m as Button,
-  n as CheckBox,
+  a as CheckBox,
   l as CheckboxGroup,
-  i as Dialog,
+  d as Dialog,
   B as Dropdown,
   s as DropdownOptions,
   D as FlatBanner,
-  h as Label,
-  g as LinearProgress,
-  A as MediaCardWithAction,
-  F as PhoneAndCountryDropdown,
-  L as PromoCode,
-  T as RadioButtonGroup,
-  I as Stepper,
-  O as Text,
-  W as TextFieldInput
+  g as ImageUpload,
+  P as Label,
+  A as LinearProgress,
+  F as MediaCardWithAction,
+  I as PhoneAndCountryDropdown,
+  S as PromoCode,
+  y as RadioButtonGroup,
+  O as Stepper,
+  U as Text,
+  j as TextFieldInput
 };

package/package.json

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