@hybridcore/ui 1.6.0 → 1.6.1

package/dist/components/uploader/logic.js

@@ -0,0 +1,74 @@
+import { useThemeProps as I } from "@mui/material";
+import g from "lodash";
+import { useState as w } from "react";
+import { confirm as S, alert as h } from "../confirm/index.js";
+const N = (C) => {
+  const l = I({ props: C, name: "HCUploader" }), {
+    type: r = "IMAGE",
+    allowedExtensions: i = ["JPG", "PNG", "GIF"],
+    urls: o = [],
+    inputName: m = "file",
+    multiple: p = !1,
+    maxSize: a = 5,
+    minSize: c,
+    uploadAction: E,
+    onChange: n
+  } = l, [d, f] = w(!1), [M, u] = w(null), y = {
+    ...l,
+    type: r,
+    allowedExtensions: i,
+    urls: o,
+    inputName: m,
+    multiple: p,
+    maxSize: a,
+    minSize: c,
+    uploading: d
+  };
+  return {
+    refs: {},
+    state: {
+      ownerState: y,
+      uploading: d,
+      imageModal: M,
+      type: r,
+      allowedExtensions: i,
+      urls: o,
+      inputName: m,
+      multiple: p,
+      maxSize: a,
+      minSize: c
+    },
+    actions: {
+      handleChange: async (e) => {
+        f(!0);
+        const s = await E(e);
+        f(!1), s && n && n([...o, s].filter((t) => t));
+      },
+      handleRemove: (e) => async () => {
+        await S(
+          "Are you sure?",
+          `${g.startCase(g.lowerCase(r))} will be removed!`
+        ) && n && n(o.filter((t) => t !== e));
+      },
+      onTypeError: () => {
+        h("Error!", "Type error");
+      },
+      onSizeError: () => {
+        h("Error!", `File size is out of allowed limits!
+Max: ${a}mb`);
+      },
+      onOpenImageModal: (e) => () => {
+        u(e);
+      },
+      onCloseImageModal: () => {
+        u(null);
+      },
+      onOpenFile: (e) => () => {
+        window.open(e, "_blank");
+      }
+    }
+  };
+};
+export {
+  N as useUploaderLogic
+};

package/dist/components/uploader/styled.js

@@ -1,33 +1,18 @@
-import { styled as o, Box as e } from "@mui/material";
-const t = o(e, {
-  name: "SNUploader",
-  slot: "dropArea"
-})(({ theme: r }) => ({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  border: "1px dashed",
-  borderColor: r.palette.divider,
-  borderRadius: 5,
-  padding: r.spacing(3),
-  transition: "all .3s",
-  cursor: "pointer",
-  userSelect: "none",
-  "&:hover:not([aria-disabled=true])": {
-    borderColor: r.palette.primary.main
-  },
-  "& .MuiSvgIcon-root": {
-    fontSize: 58
-  },
-  "&[aria-disabled=true]": {
-    cursor: "default",
-    opacity: 0.5
-  }
-})), i = o(e, {
-  name: "SNUploader",
-  slot: "imageThumbContainer"
-})(({ theme: r }) => ({
+import { styled as e, Box as r, Grid as n, Chip as i, Typography as a, Dialog as l, IconButton as p } from "@mui/material";
+const s = (o) => o !== "ownerState", c = e(r, {
+  name: "HCUploader",
+  slot: "root",
+  shouldForwardProp: s
+})({}), m = e(n, {
+  name: "HCUploader",
+  slot: "imageGrid"
+})(({ theme: o }) => ({
+  marginBottom: o.spacing(1)
+})), g = e(r, {
+  name: "HCUploader",
+  slot: "imageThumb",
+  shouldForwardProp: (o) => o !== "url"
+})(({ theme: o, url: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -35,8 +20,10 @@ const t = o(e, {
   borderRadius: 12,
   height: 120,
   transition: "all .3s",
+  background: `url(${t}) no-repeat center`,
+  backgroundSize: "cover",
   "&:hover": {
-    borderColor: r.palette.primary.main,
+    borderColor: o.palette.primary.main,
     "& .MuiButtonBase-root": {
       opacity: 1
     }
@@ -44,26 +31,86 @@ const t = o(e, {
   "& .MuiButtonBase-root": {
     marginLeft: 2,
     marginRight: 2,
-    background: r.palette.common.white,
+    background: o.palette.common.white,
     transition: "all .3s",
     opacity: 0
   }
-})), n = o(e, {
-  name: "SNUploader",
-  slot: "fileThumbContainer"
-})(({ theme: r }) => ({
+})), u = e(i, {
+  name: "HCUploader",
+  slot: "fileChip"
+})(({ theme: o }) => ({
+  marginRight: o.spacing(1),
+  marginBottom: o.spacing(1)
+})), C = e(r, {
+  name: "HCUploader",
+  slot: "chipIcon"
+})(({ theme: o }) => ({
+  display: "inline-flex",
+  marginLeft: o.spacing(1)
+})), b = e(r, {
+  name: "HCUploader",
+  slot: "dropArea"
+})(({ theme: o }) => ({
   display: "flex",
-  marginBottom: r.spacing(0.5),
-  border: "1px solid",
-  borderColor: r.palette.divider,
-  padding: r.spacing(0.5),
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "1px dashed",
+  borderColor: o.palette.divider,
+  borderRadius: 5,
+  padding: o.spacing(3),
   transition: "all .3s",
-  "&:hover": {
-    borderColor: r.palette.primary.main
+  cursor: "pointer",
+  userSelect: "none",
+  "&:hover:not([aria-disabled=true])": {
+    borderColor: o.palette.primary.main
+  },
+  "& .MuiSvgIcon-root": {
+    fontSize: 58
+  },
+  "&[aria-disabled=true]": {
+    cursor: "default",
+    opacity: 0.5
   }
-}));
+})), f = e(r, {
+  name: "HCUploader",
+  slot: "dropAreaIcon"
+})({
+  display: "inline-flex"
+}), h = e(a, {
+  name: "HCUploader",
+  slot: "dropAreaTitle"
+})({}), y = e(a, {
+  name: "HCUploader",
+  slot: "dropAreaCaption"
+})({}), U = e(l, {
+  name: "HCUploader",
+  slot: "previewDialog"
+})({}), w = e(p, {
+  name: "HCUploader",
+  slot: "previewCloseButton"
+})(({ theme: o }) => ({
+  position: "absolute",
+  right: o.spacing(1),
+  top: o.spacing(1),
+  backgroundColor: `${o.palette.common.white} !important`
+})), H = e("img", {
+  name: "HCUploader",
+  slot: "previewImage"
+})({
+  width: "100%"
+});
 export {
-  t as DropAreaContainer,
-  n as FileThumbContainer,
-  i as ImageThumbContainer
+  C as ChipIconRoot,
+  y as DropAreaCaption,
+  b as DropAreaContainer,
+  f as DropAreaIcon,
+  h as DropAreaTitle,
+  u as FileChip,
+  m as ImageGrid,
+  g as ImageThumbContainer,
+  w as PreviewCloseButton,
+  U as PreviewDialog,
+  H as PreviewImage,
+  c as UploaderRoot
 };

package/dist/{createSvgIcon-BjpIhJ30.js → createSvgIcon-BM3-TsGy.js}

@@ -1,19 +1,12 @@
 import { g as f } from "./_commonjsHelpers-BVfed4GL.js";
-import { c as p } from "./createSvgIcon-DrtgaibK.js";
-import { C as d } from "./createTheme-DYxDnE9u.js";
+import { c as p } from "./createSvgIcon-DX-SqL8M.js";
+import { C as d } from "./styled-Bsjp3kFh.js";
 import { c as g, o as _, a as v, u as b } from "./useId-B4-oF9Mq.js";
-import { d as h } from "./debounce-46wSf_lW.js";
-import { r as E, u as N } from "./unsupportedProp-BND8AB6O.js";
-import { s as C, u as I, b as S, a as x, c as y } from "./ButtonBase-2bPw77UP.js";
-import { c as q } from "./capitalize-ciszXJ7R.js";
-import { i as $ } from "./isMuiElement-CxT3_ACP.js";
+import { d as h, i as E } from "./isMuiElement-BkJ72LB3.js";
+import { r as N, u as C } from "./unsupportedProp-BND8AB6O.js";
+import { s as I, u as S, b as x, a as y, d as q } from "./ButtonBase-sObABYY2.js";
+import { c as $ } from "./capitalize-quqpGCFu.js";
 import { u as D } from "./useControlled-BYdyS7Pn.js";
-function M(e, t) {
-  return process.env.NODE_ENV === "production" ? () => null : (r, a, u, i, c) => {
-    const m = u || "<<anonymous>>", l = c || a;
-    return typeof r[a] < "u" ? new Error(`The ${i} \`${l}\` of \`${m}\` is deprecated. ${t}`) : null;
-  };
-}
 var n = { exports: {} };
 (function(e) {
   function t(r) {
@@ -23,7 +16,13 @@ var n = { exports: {} };
   }
   e.exports = t, e.exports.__esModule = !0, e.exports.default = e.exports;
 })(n);
-var W = n.exports, o = {};
+var U = n.exports, o = {};
+function M(e, t) {
+  return process.env.NODE_ENV === "production" ? () => null : (r, a, u, i, c) => {
+    const l = u || "<<anonymous>>", m = c || a;
+    return typeof r[a] < "u" ? new Error(`The ${i} \`${m}\` of \`${l}\` is deprecated. ${t}`) : null;
+  };
+}
 const O = {
   configure: (e) => {
     process.env.NODE_ENV !== "production" && console.warn(["MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.", "", "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", "", "The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401", "", "The updated documentation: https://mui.com/guides/classname-generator/"].join(`
@@ -31,27 +30,27 @@ const O = {
   }
 }, P = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  capitalize: q,
+  capitalize: $,
   createChainedFunction: g,
   createSvgIcon: p,
   debounce: h,
   deprecatedPropType: M,
-  isMuiElement: $,
+  isMuiElement: E,
   ownerDocument: _,
   ownerWindow: v,
-  requirePropFactory: E,
-  setRef: C,
+  requirePropFactory: N,
+  setRef: I,
   unstable_ClassNameGenerator: O,
-  unstable_useEnhancedEffect: I,
+  unstable_useEnhancedEffect: S,
   unstable_useId: b,
-  unsupportedProp: N,
+  unsupportedProp: C,
   useControlled: D,
-  useEventCallback: S,
-  useForkRef: x,
-  useIsFocusVisible: y
+  useEventCallback: x,
+  useForkRef: y,
+  useIsFocusVisible: q
 }, Symbol.toStringTag, { value: "Module" })), R = /* @__PURE__ */ f(P);
 var s;
-function Y() {
+function W() {
   return s || (s = 1, function(e) {
     "use client";
     Object.defineProperty(e, "__esModule", {
@@ -66,6 +65,6 @@ function Y() {
   }(o)), o;
 }
 export {
-  W as i,
-  Y as r
+  U as i,
+  W as r
 };

package/dist/{createSvgIcon-DrtgaibK.js → createSvgIcon-DX-SqL8M.js}

@@ -1,15 +1,13 @@
-import { _ as I, a as $ } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import { _ as b, a as $ } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import * as _ from "react";
-import { jsxs as b, jsx as w } from "react/jsx-runtime";
+import { jsxs as I, jsx as w } from "react/jsx-runtime";
 import { P as o } from "./index-C__OZmYy.js";
-import { g as T, u as N, c as C, a as R } from "./useThemeProps-BzzHcQyd.js";
-import { s as O } from "./styled-eZwjUruw.js";
-import { g as B } from "./createTheme-DYxDnE9u.js";
-import { c as y } from "./capitalize-ciszXJ7R.js";
+import { b as T, g as N, s as C, u as R, c as O, a as B } from "./styled-Bsjp3kFh.js";
+import { c as y } from "./capitalize-quqpGCFu.js";
 function j(e) {
-  return B("MuiSvgIcon", e);
+  return T("MuiSvgIcon", e);
 }
-T("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+N("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 const E = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], M = (e) => {
   const {
     color: t,
@@ -18,8 +16,8 @@ const E = ["children", "className", "color", "component", "fontSize", "htmlColor
   } = e, r = {
     root: ["root", t !== "inherit" && `color${y(t)}`, `fontSize${y(n)}`]
   };
-  return R(r, j, i);
-}, V = O("svg", {
+  return B(r, j, i);
+}, V = C("svg", {
   name: "MuiSvgIcon",
   slot: "Root",
   overridesResolver: (e, t) => {
@@ -32,7 +30,7 @@ const E = ["children", "className", "color", "component", "fontSize", "htmlColor
   theme: e,
   ownerState: t
 }) => {
-  var n, i, r, f, a, c, p, v, s, l, m, g, d, u, h, x, z;
+  var n, i, r, f, a, c, p, v, s, l, d, h, m, u, g, x, z;
   return {
     userSelect: "none",
     width: "1em",
@@ -50,14 +48,14 @@ const E = ["children", "className", "color", "component", "fontSize", "htmlColor
       large: ((s = e.typography) == null || (l = s.pxToRem) == null ? void 0 : l.call(s, 35)) || "2.1875rem"
     }[t.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (m = (g = (e.vars || e).palette) == null || (d = g[t.color]) == null ? void 0 : d.main) != null ? m : {
-      action: (u = (e.vars || e).palette) == null || (h = u.action) == null ? void 0 : h.active,
+    color: (d = (h = (e.vars || e).palette) == null || (m = h[t.color]) == null ? void 0 : m.main) != null ? d : {
+      action: (u = (e.vars || e).palette) == null || (g = u.action) == null ? void 0 : g.active,
       disabled: (x = (e.vars || e).palette) == null || (z = x.action) == null ? void 0 : z.disabled,
       inherit: void 0
     }[t.color]
   };
 }), S = /* @__PURE__ */ _.forwardRef(function(t, n) {
-  const i = N({
+  const i = R({
     props: t,
     name: "MuiSvgIcon"
   }), {
@@ -69,27 +67,27 @@ const E = ["children", "className", "color", "component", "fontSize", "htmlColor
     htmlColor: v,
     inheritViewBox: s = !1,
     titleAccess: l,
-    viewBox: m = "0 0 24 24"
-  } = i, g = I(i, E), d = $({}, i, {
+    viewBox: d = "0 0 24 24"
+  } = i, h = b(i, E), m = $({}, i, {
     color: a,
     component: c,
     fontSize: p,
     instanceFontSize: t.fontSize,
     inheritViewBox: s,
-    viewBox: m
+    viewBox: d
   }), u = {};
-  s || (u.viewBox = m);
-  const h = M(d);
-  return /* @__PURE__ */ b(V, $({
+  s || (u.viewBox = d);
+  const g = M(m);
+  return /* @__PURE__ */ I(V, $({
     as: c,
-    className: C(h.root, f),
+    className: O(g.root, f),
     focusable: "false",
     color: v,
     "aria-hidden": l ? void 0 : !0,
     role: l ? "img" : void 0,
     ref: n
-  }, u, g, {
-    ownerState: d,
+  }, u, h, {
+    ownerState: m,
     children: [r, l ? /* @__PURE__ */ w("title", {
       children: l
     }) : null]
@@ -168,7 +166,7 @@ process.env.NODE_ENV !== "production" && (S.propTypes = {
   viewBox: o.string
 });
 S.muiName = "SvgIcon";
-function W(e, t) {
+function L(e, t) {
   function n(i, r) {
     return /* @__PURE__ */ w(S, $({
       "data-testid": `${t}Icon`,
@@ -180,5 +178,5 @@ function W(e, t) {
   return process.env.NODE_ENV !== "production" && (n.displayName = `${t}Icon`), n.muiName = S.muiName, /* @__PURE__ */ _.memo(/* @__PURE__ */ _.forwardRef(n));
 }
 export {
-  W as c
+  L as c
 };

package/dist/{dialog-DcwXug9J.js → dialog-cf4HUXXl.js}

@@ -1,47 +1,46 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
 import { confirmable as x } from "react-confirm";
 import { IconButton as h } from "@mui/material";
 import { Close as C } from "@mui/icons-material";
-import { c as D, g as T, D as b, a as y, b as B } from "./DialogContent-B3nbEbuv.js";
+import { b as D, g as T, D as b, a as y, c as B } from "./DialogContent-CGJ7alb8.js";
 import { _ as j, a as v } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
-import * as d from "react";
+import * as p from "react";
 import { P as o } from "./index-C__OZmYy.js";
-import { u as M, c as N, a as O } from "./useThemeProps-BzzHcQyd.js";
-import { s as R } from "./styled-eZwjUruw.js";
-import { T as P } from "./Typography-CxbneZy_.js";
-import { B as m } from "./Button-CvE2gnly.js";
+import { s as M, u as N, c as O, a as R } from "./styled-Bsjp3kFh.js";
+import { T as P } from "./Typography-B-Z5Y0Xq.js";
+import { B as m } from "./Modal-DlB6GH-f.js";
 const _ = ["className", "id"], k = (a) => {
   const {
     classes: t
   } = a;
-  return O({
+  return R({
     root: ["root"]
   }, T, t);
-}, w = R(P, {
+}, w = M(P, {
   name: "MuiDialogTitle",
   slot: "Root",
   overridesResolver: (a, t) => t.root
 })({
   padding: "16px 24px",
   flex: "0 0 auto"
-}), u = /* @__PURE__ */ d.forwardRef(function(t, r) {
-  const i = M({
+}), u = /* @__PURE__ */ p.forwardRef(function(t, l) {
+  const i = N({
     props: t,
     name: "MuiDialogTitle"
   }), {
     className: e,
     id: n
-  } = i, l = j(i, _), c = i, f = k(c), {
+  } = i, r = j(i, _), c = i, f = k(c), {
     titleId: g = n
-  } = d.useContext(D);
+  } = p.useContext(D);
   return /* @__PURE__ */ s(w, v({
     component: "h2",
-    className: N(f.root, e),
+    className: O(f.root, e),
     ownerState: c,
-    ref: r,
+    ref: l,
     variant: "h6",
     id: n ?? g
-  }, l));
+  }, r));
 });
 process.env.NODE_ENV !== "production" && (u.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -77,19 +76,19 @@ const I = {
   show: a = !0,
   proceed: t = () => {
   },
-  title: r,
+  title: l,
   description: i,
   options: e
 }) => {
   e = { ...I, ...e };
   const n = () => {
     t(!1);
-  }, l = () => {
+  }, r = () => {
     t(!1);
   }, c = () => {
     t(!0);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     b,
     {
       open: a,
@@ -115,7 +114,7 @@ const I = {
         }
       },
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ d(
           u,
           {
             id: "dialog-title",
@@ -125,14 +124,14 @@ const I = {
               alignItems: "center"
             },
             children: [
-              r,
-              /* @__PURE__ */ s(h, { onClick: l, children: /* @__PURE__ */ s(C, {}) })
+              l,
+              /* @__PURE__ */ s(h, { onClick: r, children: /* @__PURE__ */ s(C, {}) })
             ]
           }
         ),
         /* @__PURE__ */ s(y, { sx: { minWidth: 400 }, children: i }),
-        /* @__PURE__ */ p(B, { children: [
-          !e.disableCancelButton && /* @__PURE__ */ s(m, { color: "inherit", onClick: l, children: e.cancelButtonText }),
+        /* @__PURE__ */ d(B, { children: [
+          !e.disableCancelButton && /* @__PURE__ */ s(m, { color: "inherit", onClick: r, children: e.cancelButtonText }),
           /* @__PURE__ */ s(
             m,
             {
@@ -147,8 +146,8 @@ const I = {
       ]
     }
   );
-}, G = x(A);
+}, q = x(A);
 export {
-  u as D,
-  G as a
+  q as D,
+  u as a
 };