@fangzsx/component-library 0.0.37 → 0.0.39

package/dist/colors-CyChpKWu.js

@@ -0,0 +1,23 @@
+const c = "#1D252D", n = "#404A58", r = "#566376", s = "#8996A9", o = "#C4CBD4", t = "#E6EAED", E = "#F4F7F9", F = "#053E72", e = "#0B6B9F", y = "#27A4E8", a = "#C8EDFE", g = "#E6F6FF", i = "#055C56", p = "#E6FEEE", m = "#8E3007", C = "#FFF9F0", D = "#800711", d = "#FFECEB", A = {
+  grey800: c,
+  grey700: n,
+  grey600: r,
+  grey400: s,
+  grey200: o,
+  grey100: t,
+  grey50: E,
+  primary800: F,
+  primary700: e,
+  primary500: y,
+  primary100: a,
+  primary50: g,
+  secondary800: i,
+  secondary50: p,
+  warning800: m,
+  warning50: C,
+  destructive800: D,
+  destructive50: d
+};
+export {
+  A as c
+};

package/dist/components/AppBarPublic/index.js

@@ -3,7 +3,7 @@ import { c as E } from "../../createSvgIcon-C0YrvByi.js";
 import { Stack as w, Popper as $, ClickAwayListener as D, Paper as U } from "@mui/material";
 import * as C from "react";
 import { useState as Z } from "react";
-import { C as G, B as b } from "../../index-Dnsx2wLn.js";
+import { C as G, B as b } from "../../index-CdcRS0lC.js";
 import { g as V, a as A, c as l, P as r } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as H, s as B, c as T, a as h, m as v } from "../../DefaultPropsProvider-DVX_ssOt.js";
 import { c as I, a as F } from "../../useTimeout-UzNJH-cm.js";

package/dist/components/Banner/index.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as d, CheckCircle as a, InfoOutlined as m, WarningAmber as h } from "@mui/icons-material";
 import { Card as g, Box as c, Typography as e } from "@mui/material";
-import { c as n } from "../../colors-DvNGPCDl.js";
+import { c as n } from "../../colors-CyChpKWu.js";
 const y = {
   warning: { icon: h, color: "#f59e0b" },
   info: { icon: m, color: n.primary500 },

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import "../../colors-DvNGPCDl.js";
-import { B as p } from "../../index-Dnsx2wLn.js";
+import "../../colors-CyChpKWu.js";
+import { B as p } from "../../index-CdcRS0lC.js";
 export {
   p as Button
 };

package/dist/components/Dropdown/index.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as r, Fragment as y } from "react/jsx-runtime";
 import { ExpandMoreOutlined as C } from "@mui/icons-material";
 import { Box as I, IconButton as v, Menu as M, MenuItem as k, ListItemIcon as w, ListItemText as j } from "@mui/material";
 import { useState as B } from "react";
-import { c as t } from "../../colors-DvNGPCDl.js";
+import { c as t } from "../../colors-CyChpKWu.js";
 function L({
   items: h,
   activeItemId: e,

package/dist/components/FlatBanner/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as C, CheckCircle as f, InfoOutlineRounded as g, WarningAmberRounded as x } from "@mui/icons-material";
 import { Card as m, Box as e, Typography as t } from "@mui/material";
-import { c as o } from "../../colors-DvNGPCDl.js";
+import { c as o } from "../../colors-CyChpKWu.js";
 const b = {
   warning: { titleColor: o.warning800, bgColor: o.warning50, icon: x, iconColor: "#f59e0b" },
   info: { titleColor: o.primary800, bgColor: o.primary50, icon: g, iconColor: "#f59e0b" },

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

@@ -1,5 +1,3 @@
-import { default as React } from 'react';
-
 interface ImageUploadProps {
     label?: string;
     required?: boolean;
@@ -11,5 +9,5 @@ interface ImageUploadProps {
     disabled?: boolean;
     onChange?: (file: File | null, error: string) => void;
 }
-declare const ImageUpload: React.FC<ImageUploadProps>;
-export default ImageUpload;
+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

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

package/dist/components/MediaCardWithAction/index.js

@@ -1,5 +1,5 @@
 import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import { B as A } from "../../index-Dnsx2wLn.js";
+import { B as A } from "../../index-CdcRS0lC.js";
 import * as u from "react";
 import { g as m, a as f, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as C, s as g, c as y, a as b } from "../../DefaultPropsProvider-DVX_ssOt.js";

package/dist/components/PromoCode/index.js

@@ -2,7 +2,7 @@ import { jsxs as B, jsx as o } from "react/jsx-runtime";
 import { Close as D, LocalOffer as I } from "@mui/icons-material";
 import { Box as c, Chip as S, IconButton as A, Typography as h, TextField as R, InputAdornment as T, CircularProgress as W, Button as k } from "@mui/material";
 import { useState as w, useRef as O, useEffect as P, useCallback as n } from "react";
-import { c as r } from "../../colors-DvNGPCDl.js";
+import { c as r } from "../../colors-CyChpKWu.js";
 function K({
   value: e,
   onChange: d,

package/dist/{index-Dnsx2wLn.js → index-CdcRS0lC.js}

@@ -1,5 +1,5 @@
 import { jsx as c, jsxs as U } from "react/jsx-runtime";
-import { c as P } from "./colors-DvNGPCDl.js";
+import { c as P } from "./colors-CyChpKWu.js";
 import * as k from "react";
 import { g as G, a as _, c as i, P as t } from "./generateUtilityClasses-BCID9NF1.js";
 import { u as A, s as f, c as R, a as H, m as O, b as so, r as lo } from "./DefaultPropsProvider-DVX_ssOt.js";

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 { B as m } from "./index-CdcRS0lC.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.37",
+  "version": "0.0.39",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/colors-DvNGPCDl.js

@@ -1,19 +0,0 @@
-const c = "#1D252D", n = "#566376", s = "#E6EAED", o = "#F4F7F9", r = "#053E72", t = "#27A4E8", E = "#C8EDFE", F = "#E6F6FF", e = "#055C56", y = "#E6FEEE", a = "#8E3007", i = "#FFF9F0", g = "#800711", p = "#FFECEB", d = {
-  grey800: c,
-  grey600: n,
-  grey100: s,
-  grey50: o,
-  primary800: r,
-  primary500: t,
-  primary100: E,
-  primary50: F,
-  secondary800: e,
-  secondary50: y,
-  warning800: a,
-  warning50: i,
-  destructive800: g,
-  destructive50: p
-};
-export {
-  d as c
-};