@fangzsx/component-library 0.0.9 → 0.0.11

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

@@ -4,6 +4,7 @@ type BannerProps = {
     type: "warning" | "info" | "success" | "error";
     title: string;
     description: string | ReactNode;
+    withIcon: boolean;
 };
 export declare function FlatBanner(props: BannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FlatBanner/index.js

@@ -1,32 +1,36 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { Card as p, Box as t, Typography as i } from "@mui/material";
+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-BYtTt7gN.js";
-const d = {
-  warning: { titleColor: o.warning800, bgColor: o.warning50 },
-  info: { titleColor: o.primary800, bgColor: o.primary50 },
-  success: { titleColor: o.secondary800, bgColor: o.secondary50 },
-  error: { titleColor: o.destructive800, bgColor: o.destructive50 }
+const b = {
+  warning: { titleColor: o.warning800, bgColor: o.warning50, icon: x, iconColor: "#f59e0b" },
+  info: { titleColor: o.primary800, bgColor: o.primary50, icon: g, iconColor: "#f59e0b" },
+  success: { titleColor: o.secondary800, bgColor: o.secondary50, icon: f, iconColor: "#10b981" },
+  error: { titleColor: o.destructive800, bgColor: o.destructive50, icon: C, iconColor: "#ef4444" }
 };
-function f(l) {
-  const { type: n, title: c, description: s } = l, e = d[n];
-  return /* @__PURE__ */ r(
-    p,
+function I(c) {
+  const { type: l, title: s, description: d, withIcon: a } = c, r = b[l], p = r.icon;
+  return /* @__PURE__ */ n(
+    m,
     {
       sx: {
         display: "flex",
-        backgroundColor: e.bgColor,
+        backgroundColor: r.bgColor,
         borderRadius: "5px",
         py: 1.5,
         px: 2,
         boxShadow: 2
       },
-      children: /* @__PURE__ */ r(t, { display: "flex", alignItems: "center", gap: 2, children: /* @__PURE__ */ a(t, { children: [
-        /* @__PURE__ */ r(i, { sx: { fontWeight: 700, fontSize: 16, color: e.titleColor, mb: 0.5 }, children: c }),
-        /* @__PURE__ */ r(i, { sx: { color: o.grey800, fontSize: "13px" }, children: s })
-      ] }) })
+      children: /* @__PURE__ */ i(e, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [
+        a && /* @__PURE__ */ n(p, { sx: { color: r.iconColor, fontSize: "24px", display: { xs: "none", md: "block" } } }),
+        /* @__PURE__ */ i(e, { children: [
+          /* @__PURE__ */ n(t, { sx: { fontWeight: 700, fontSize: 16, color: r.titleColor, mb: 0.5 }, children: s }),
+          /* @__PURE__ */ n(t, { sx: { color: o.grey800, fontSize: "13px" }, children: d })
+        ] })
+      ] })
     }
   );
 }
 export {
-  f as FlatBanner
+  I as FlatBanner
 };

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

@@ -5,6 +5,7 @@ interface MediaCardWithActionProps {
     description: string;
     buttonLabel: string;
     disabled?: boolean;
+    action: () => void;
 }
-export declare function MediaCardWithAction({ image, imageAlt, title, description, buttonLabel, disabled }: MediaCardWithActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCardWithAction({ image, imageAlt, title, description, buttonLabel, disabled, action, }: MediaCardWithActionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MediaCardWithAction/index.js

@@ -1,5 +1,5 @@
 import { jsx as p, jsxs as N } from "react/jsx-runtime";
-import { B as k } from "../../index-DGepNtNg.js";
+import { B as I } from "../../index-DGepNtNg.js";
 import * as f from "react";
 import { n as D, o as _, g as m, a as y, u as h, s as C, c as b, d as x, P as t, i as R, b as T, m as $, j as V } from "../../ButtonBase-CAtBagnK.js";
 import { P as z } from "../../Paper-CAUsv8qs.js";
@@ -19,11 +19,11 @@ function H(o) {
     ...n
   } = o, {
     systemProps: r,
-    otherProps: i
+    otherProps: c
   } = F(n);
   let a;
-  return Array.isArray(e) ? a = [r, ...e] : typeof e == "function" ? a = (...c) => {
-    const s = e(...c);
+  return Array.isArray(e) ? a = [r, ...e] : typeof e == "function" ? a = (...i) => {
+    const s = e(...i);
     return D(s) ? {
       ...r,
       ...s
@@ -32,7 +32,7 @@ function H(o) {
     ...r,
     ...e
   }, {
-    ...i,
+    ...c,
     sx: a
   };
 }
@@ -60,19 +60,19 @@ const J = (o) => {
     props: e,
     name: "MuiCard"
   }), {
-    className: i,
+    className: c,
     raised: a = !1,
-    ...c
+    ...i
   } = r, s = {
     ...r,
     raised: a
   }, l = J(s);
   return /* @__PURE__ */ p(q, {
-    className: b(l.root, i),
+    className: b(l.root, c),
     elevation: a ? 8 : void 0,
     ref: n,
     ownerState: s,
-    ...c
+    ...i
   });
 });
 process.env.NODE_ENV !== "production" && (A.propTypes = {
@@ -142,18 +142,18 @@ const Q = (o) => {
     props: e,
     name: "MuiCardActions"
   }), {
-    disableSpacing: i = !1,
+    disableSpacing: c = !1,
     className: a,
-    ...c
+    ...i
   } = r, s = {
     ...r,
-    disableSpacing: i
+    disableSpacing: c
   }, l = Q(s);
   return /* @__PURE__ */ p(X, {
     className: b(l.root, a),
     ownerState: s,
     ref: n,
-    ...c
+    ...i
   });
 });
 process.env.NODE_ENV !== "production" && (E.propTypes = {
@@ -207,19 +207,19 @@ const Z = (o) => {
     props: e,
     name: "MuiCardContent"
   }), {
-    className: i,
+    className: c,
     component: a = "div",
-    ...c
+    ...i
   } = r, s = {
     ...r,
     component: a
   }, l = Z(s);
   return /* @__PURE__ */ p(tt, {
     as: a,
-    className: b(l.root, i),
+    className: b(l.root, c),
     ownerState: s,
     ref: n,
-    ...c
+    ...i
   });
 });
 process.env.NODE_ENV !== "production" && (B.propTypes = {
@@ -270,9 +270,9 @@ const ot = (o) => {
       ownerState: n
     } = o, {
       isMediaComponent: r,
-      isImageComponent: i
+      isImageComponent: c
     } = n;
-    return [e.root, r && e.media, i && e.img];
+    return [e.root, r && e.media, c && e.img];
   }
 })({
   display: "block",
@@ -299,32 +299,32 @@ const ot = (o) => {
     props: e,
     name: "MuiCardMedia"
   }), {
-    children: i,
+    children: c,
     className: a,
-    component: c = "div",
+    component: i = "div",
     image: s,
     src: l,
     style: g,
     ...O
-  } = r, d = rt.includes(c), v = !d && s ? {
+  } = r, d = rt.includes(i), v = !d && s ? {
     backgroundImage: `url("${s}")`,
     ...g
   } : g, u = {
     ...r,
-    component: c,
+    component: i,
     isMediaComponent: d,
-    isImageComponent: st.includes(c)
+    isImageComponent: st.includes(i)
   }, M = ot(u);
   return /* @__PURE__ */ p(nt, {
     className: b(M.root, a),
-    as: c,
+    as: i,
     role: !d && s ? "img" : void 0,
     ref: n,
     style: v,
     ownerState: u,
     src: d ? s || l : void 0,
     ...O,
-    children: i
+    children: c
   });
 });
 process.env.NODE_ENV !== "production" && (U.propTypes = {
@@ -389,13 +389,13 @@ const it = {
     align: e,
     gutterBottom: n,
     noWrap: r,
-    paragraph: i,
+    paragraph: c,
     variant: a,
-    classes: c
+    classes: i
   } = o, s = {
-    root: ["root", a, o.align !== "inherit" && `align${T(e)}`, n && "gutterBottom", r && "noWrap", i && "paragraph"]
+    root: ["root", a, o.align !== "inherit" && `align${T(e)}`, n && "gutterBottom", r && "noWrap", c && "paragraph"]
   };
-  return x(s, at, c);
+  return x(s, at, i);
 }, pt = C("span", {
   name: "MuiTypography",
   slot: "Root",
@@ -484,12 +484,12 @@ const it = {
 }, S = /* @__PURE__ */ f.forwardRef(function(e, n) {
   const {
     color: r,
-    ...i
+    ...c
   } = h({
     props: e,
     name: "MuiTypography"
-  }), a = !it[r], c = ct({
-    ...i,
+  }), a = !it[r], i = ct({
+    ...c,
     ...a && {
       color: r
     }
@@ -503,8 +503,8 @@ const it = {
     variant: u = "body1",
     variantMapping: M = P,
     ...j
-  } = c, w = {
-    ...c,
+  } = i, w = {
+    ...i,
     align: s,
     color: r,
     className: l,
@@ -514,11 +514,11 @@ const it = {
     paragraph: v,
     variant: u,
     variantMapping: M
-  }, W = g || (v ? "p" : M[u] || P[u]) || "span", I = lt(w);
+  }, W = g || (v ? "p" : M[u] || P[u]) || "span", k = lt(w);
   return /* @__PURE__ */ p(pt, {
     as: W,
     ref: n,
-    className: b(I.root, l),
+    className: b(k.root, l),
     ...j,
     ownerState: w,
     style: {
@@ -620,8 +620,9 @@ function yt({
   imageAlt: e = "Card image",
   title: n,
   description: r,
-  buttonLabel: i,
-  disabled: a
+  buttonLabel: c,
+  disabled: a,
+  action: i
 }) {
   return /* @__PURE__ */ N(A, { sx: { px: 4, py: 3, flex: 1 }, children: [
     /* @__PURE__ */ p(
@@ -642,7 +643,7 @@ function yt({
       /* @__PURE__ */ p(S, { gutterBottom: !0, variant: "h5", component: "div", sx: { textAlign: "left", fontWeight: 700 }, children: n }),
       /* @__PURE__ */ p(S, { variant: "body2", sx: { color: "text.secondary", textAlign: "left" }, children: r })
     ] }),
-    /* @__PURE__ */ p(E, { sx: { padding: 0, pt: "24px", justifyContent: "flex-start" }, children: /* @__PURE__ */ p(k, { size: "small", sx: { width: "100%", fontWeight: 600 }, disabled: a, children: i }) })
+    /* @__PURE__ */ p(E, { sx: { padding: 0, pt: "24px", justifyContent: "flex-start" }, children: /* @__PURE__ */ p(I, { size: "small", sx: { width: "100%", fontWeight: 600 }, disabled: a, onClick: i, children: c }) })
   ] });
 }
 export {

package/package.json

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