@hybridcore/ui 1.6.0 → 1.6.1

package/dist/components/card/index.js

@@ -1,378 +1,105 @@
-import { jsx as e, jsxs as r, Fragment as p } from "react/jsx-runtime";
-import { Skeleton as o, Box as u, Avatar as M } from "@mui/material";
-import { LandscapeCardRoot as A, LandscapeInfoBox as P, LandscapeCardExtraActions as _, PortraitCardRoot as L, PortraitCardExtraActions as U } from "./styled.js";
-import { a as x, _ as T } from "../../objectWithoutPropertiesLoose-DJteAcBH.js";
-import * as S from "react";
-import { P as i } from "../../index-C__OZmYy.js";
-import { g as N, u as k, c as B, a as j, b as H } from "../../useThemeProps-BzzHcQyd.js";
-import { s as R } from "../../styled-eZwjUruw.js";
-import { g as E } from "../../createTheme-DYxDnE9u.js";
-import { C as O } from "../../CardContent-CSHh-ZlM.js";
-import { T as g } from "../../Typography-CxbneZy_.js";
-function D(t) {
-  return E("MuiCardActions", t);
-}
-N("MuiCardActions", ["root", "spacing"]);
-const z = ["disableSpacing", "className"], $ = (t) => {
-  const {
-    classes: n,
-    disableSpacing: s
-  } = t;
-  return j({
-    root: ["root", !s && "spacing"]
-  }, D, n);
-}, F = R("div", {
-  name: "MuiCardActions",
-  slot: "Root",
-  overridesResolver: (t, n) => {
-    const {
-      ownerState: s
-    } = t;
-    return [n.root, !s.disableSpacing && n.spacing];
-  }
-})(({
-  ownerState: t
-}) => x({
-  display: "flex",
-  alignItems: "center",
-  padding: 8
-}, !t.disableSpacing && {
-  "& > :not(:first-of-type)": {
-    marginLeft: 8
-  }
-})), W = /* @__PURE__ */ S.forwardRef(function(n, s) {
-  const c = k({
-    props: n,
-    name: "MuiCardActions"
-  }), {
-    disableSpacing: l = !1,
-    className: w
-  } = c, h = T(c, z), m = x({}, c, {
-    disableSpacing: l
-  }), b = $(m);
-  return /* @__PURE__ */ e(F, x({
-    className: B(b.root, w),
-    ownerState: m,
-    ref: s
-  }, h));
-});
-process.env.NODE_ENV !== "production" && (W.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   */
-  children: i.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: i.object,
-  /**
-   * @ignore
-   */
-  className: i.string,
-  /**
-   * If `true`, the actions do not have additional margin.
-   * @default false
-   */
-  disableSpacing: i.bool,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object])
-});
-function V(t) {
-  return E("MuiCardMedia", t);
-}
-N("MuiCardMedia", ["root", "media", "img"]);
-const G = ["children", "className", "component", "image", "src", "style"], q = (t) => {
-  const {
-    classes: n,
-    isMediaComponent: s,
-    isImageComponent: c
-  } = t;
-  return j({
-    root: ["root", s && "media", c && "img"]
-  }, V, n);
-}, J = R("div", {
-  name: "MuiCardMedia",
-  slot: "Root",
-  overridesResolver: (t, n) => {
-    const {
-      ownerState: s
-    } = t, {
-      isMediaComponent: c,
-      isImageComponent: l
-    } = s;
-    return [n.root, c && n.media, l && n.img];
-  }
-})(({
-  ownerState: t
-}) => x({
-  display: "block",
-  backgroundSize: "cover",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "center"
-}, t.isMediaComponent && {
-  width: "100%"
-}, t.isImageComponent && {
-  // ⚠️ object-fit is not supported by IE11.
-  objectFit: "cover"
-})), K = ["video", "audio", "picture", "iframe", "img"], Q = ["picture", "img"], C = /* @__PURE__ */ S.forwardRef(function(n, s) {
-  const c = k({
-    props: n,
-    name: "MuiCardMedia"
-  }), {
-    children: l,
-    className: w,
-    component: h = "div",
-    image: m,
-    src: b,
-    style: y
-  } = c, a = T(c, G), d = K.indexOf(h) !== -1, f = !d && m ? x({
-    backgroundImage: `url("${m}")`
-  }, y) : y, v = x({}, c, {
-    component: h,
-    isMediaComponent: d,
-    isImageComponent: Q.indexOf(h) !== -1
-  }), I = q(v);
-  return /* @__PURE__ */ e(J, x({
-    className: B(I.root, w),
-    as: h,
-    role: !d && m ? "img" : void 0,
-    ref: s,
-    style: f,
-    ownerState: v,
-    src: d ? m || b : void 0
-  }, a, {
-    children: l
-  }));
-});
-process.env.NODE_ENV !== "production" && (C.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   */
-  children: H(i.node, (t) => !t.children && !t.image && !t.src && !t.component ? new Error("MUI: Either `children`, `image`, `src` or `component` prop must be specified.") : null),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: i.object,
-  /**
-   * @ignore
-   */
-  className: i.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: i.elementType,
-  /**
-   * Image to be displayed as a background image.
-   * Either `image` or `src` prop must be specified.
-   * Note that caller must specify height otherwise the image will not be visible.
-   */
-  image: i.string,
-  /**
-   * An alias for `image` property.
-   * Available only with media components.
-   * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
-   */
-  src: i.string,
-  /**
-   * @ignore
-   */
-  style: i.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: i.oneOfType([i.arrayOf(i.oneOfType([i.func, i.object, i.bool])), i.func, i.object])
-});
-const se = ({
-  title: t,
-  text: n,
-  image: s,
-  orientation: c = "portrait",
-  avatar: l,
-  actions: w,
-  menu: h,
-  extraActions: m,
-  extraInfo: b,
-  stats: y,
-  loading: a = !1,
-  onClick: d
-}) => {
-  const f = () => {
-    d && d();
-  };
-  return c === "landscape" ? /* @__PURE__ */ r(A, { children: [
-    a ? /* @__PURE__ */ e(
-      o,
+import { jsxs as t, jsx as a, Fragment as l } from "react/jsx-runtime";
+import { useCardLogic as k } from "./logic.js";
+import { LandscapeCardRoot as A, MediaSkeleton as d, CardMedia as o, LandscapeContent as S, MenuContainer as b, ContentBody as L, ContentColumn as f, SkeletonLine as v, SkeletonLineSubtle as r, Title as m, Text as w, Stats as T, LandscapeInfoBox as B, SkeletonAvatarCircle as u, CardAvatarLarge as E, AvatarTitle as C, AvatarSubTitle as g, LandscapeCardExtraActions as I, SkeletonExtraIcon as c, ExtraInfo as M, ActionsContainer as R, SkeletonActions as W, PortraitCardRoot as j, CardContent as P, CardActions as y, AvatarRow as F, CardAvatar as N, AvatarLabel as q, PortraitCardExtraActions as z } from "./styled.js";
+const J = (i) => {
+  const { state: s, actions: h } = k(i), { ownerState: e, orientation: x, loading: n } = s;
+  return x === "landscape" ? /* @__PURE__ */ t(A, { ownerState: e, sx: i.sx, children: [
+    n ? /* @__PURE__ */ a(
+      d,
       {
-        sx: { width: 330, height: 200 },
+        ownerState: e,
         animation: "wave",
         variant: "rounded"
       }
-    ) : /* @__PURE__ */ e(
-      C,
+    ) : /* @__PURE__ */ a(
+      o,
       {
-        component: "img",
-        alt: t,
-        image: s,
-        sx: {
-          width: 330,
-          height: 200,
-          cursor: d ? "pointer" : "default"
-        },
-        onClick: f
+        ownerState: e,
+        alt: i.title,
+        src: i.image,
+        onClick: h.handleClick
       }
     ),
-    /* @__PURE__ */ r(O, { sx: { position: "relative" }, children: [
-      h ? /* @__PURE__ */ e(u, { position: "absolute", top: -8, right: -8, children: h }) : null,
-      /* @__PURE__ */ e(u, { flex: 1, children: /* @__PURE__ */ r(
-        u,
-        {
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          height: "100%",
-          children: [
-            /* @__PURE__ */ e(u, { children: a ? /* @__PURE__ */ r(p, { children: [
-              /* @__PURE__ */ e(
-                o,
-                {
-                  animation: "wave",
-                  height: 10,
-                  style: { marginBottom: 16, marginTop: 10 }
-                }
-              ),
-              /* @__PURE__ */ e(
-                o,
-                {
-                  animation: "wave",
-                  height: 10,
-                  style: { marginBottom: 6 }
-                }
-              ),
-              /* @__PURE__ */ e(
-                o,
-                {
-                  animation: "wave",
-                  height: 10,
-                  width: "80%",
-                  style: { marginBottom: 6 }
-                }
-              )
-            ] }) : /* @__PURE__ */ r(p, { children: [
-              /* @__PURE__ */ e(
-                g,
-                {
-                  gutterBottom: !0,
-                  variant: "subtitle1",
-                  component: "h3",
-                  sx: {
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 3,
-                    WebkitBoxOrient: "vertical",
-                    cursor: d ? "pointer" : "default"
-                  },
-                  onClick: f,
-                  children: t
-                }
-              ),
-              /* @__PURE__ */ e(
-                g,
-                {
-                  variant: "caption",
-                  component: "p",
-                  sx: {
-                    color: "text.secondary",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 4,
-                    WebkitBoxOrient: "vertical",
-                    lineHeight: "16px",
-                    cursor: d ? "pointer" : "default"
-                  },
-                  onClick: f,
-                  children: /* @__PURE__ */ e("small", { children: n })
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ e(u, { children: a ? /* @__PURE__ */ e(
-              o,
-              {
-                animation: "wave",
-                height: 10,
-                width: "40%",
-                style: { marginBottom: 6 }
-              }
-            ) : y })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ r(P, { children: [
-        a ? /* @__PURE__ */ e(
-          o,
+    /* @__PURE__ */ t(S, { children: [
+      i.menu ? /* @__PURE__ */ a(b, { children: i.menu }) : null,
+      /* @__PURE__ */ a(L, { children: /* @__PURE__ */ t(f, { children: [
+        /* @__PURE__ */ a("div", { children: n ? /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(v, { animation: "wave", height: 10 }),
+          /* @__PURE__ */ a(r, { animation: "wave", height: 10 }),
+          /* @__PURE__ */ a(
+            r,
+            {
+              animation: "wave",
+              height: 10,
+              width: "80%"
+            }
+          )
+        ] }) : /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(
+            m,
+            {
+              ownerState: e,
+              gutterBottom: !0,
+              variant: "subtitle1",
+              as: "h3",
+              onClick: h.handleClick,
+              children: i.title
+            }
+          ),
+          /* @__PURE__ */ a(
+            w,
+            {
+              ownerState: e,
+              variant: "caption",
+              as: "p",
+              onClick: h.handleClick,
+              children: /* @__PURE__ */ a("small", { children: i.text })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ a(T, { children: n ? /* @__PURE__ */ a(
+          r,
+          {
+            animation: "wave",
+            height: 10,
+            width: "40%"
+          }
+        ) : i.stats })
+      ] }) }),
+      /* @__PURE__ */ t(B, { children: [
+        n ? /* @__PURE__ */ a(
+          u,
           {
             animation: "wave",
             variant: "circular",
             width: 42,
             height: 42
           }
-        ) : /* @__PURE__ */ e(M, { src: l.image, sx: { width: 42, height: 42 } }),
-        a ? /* @__PURE__ */ r(p, { children: [
-          /* @__PURE__ */ e(
-            o,
+        ) : /* @__PURE__ */ a(E, { src: i.avatar.image }),
+        n ? /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(
+            r,
             {
               animation: "wave",
               height: 10,
-              width: "40%",
-              sx: { mb: 0.25, mt: 0.35 }
+              width: "40%"
             }
           ),
-          /* @__PURE__ */ e(
-            o,
+          /* @__PURE__ */ a(
+            r,
             {
               animation: "wave",
               height: 10,
-              width: "60%",
-              sx: { mb: 0.25 }
-            }
-          )
-        ] }) : /* @__PURE__ */ r(p, { children: [
-          /* @__PURE__ */ e(
-            g,
-            {
-              variant: "subtitle2",
-              sx: {
-                fontWeight: "normal",
-                lineHeight: "14px",
-                fontSize: "13px"
-              },
-              children: l.title
-            }
-          ),
-          /* @__PURE__ */ e(
-            g,
-            {
-              variant: "caption",
-              sx: { color: "text.secondary", lineHeight: "12px" },
-              children: /* @__PURE__ */ e("small", { children: l.subTitle })
+              width: "60%"
             }
           )
+        ] }) : /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(C, { variant: "subtitle2", children: i.avatar.title }),
+          /* @__PURE__ */ a(g, { variant: "caption", children: /* @__PURE__ */ a("small", { children: i.avatar.subTitle }) })
         ] }),
-        /* @__PURE__ */ e(_, { children: a ? /* @__PURE__ */ r(p, { children: [
-          /* @__PURE__ */ e(
-            o,
+        /* @__PURE__ */ a(I, { children: n ? /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(
+            c,
             {
               animation: "wave",
               variant: "circular",
@@ -380,8 +107,8 @@ const se = ({
               height: 32
             }
           ),
-          /* @__PURE__ */ e(
-            o,
+          /* @__PURE__ */ a(
+            c,
             {
               animation: "wave",
               variant: "circular",
@@ -389,8 +116,8 @@ const se = ({
               height: 32
             }
           ),
-          /* @__PURE__ */ e(
-            o,
+          /* @__PURE__ */ a(
+            c,
             {
               animation: "wave",
               variant: "circular",
@@ -398,172 +125,105 @@ const se = ({
               height: 32
             }
           )
-        ] }) : m }),
-        a ? /* @__PURE__ */ e(
-          o,
-          {
-            animation: "wave",
-            height: 10,
-            width: "40%",
-            sx: { mb: 0.05, mt: 0.35 }
-          }
-        ) : /* @__PURE__ */ e(
-          g,
-          {
-            variant: "caption",
-            sx: { color: "text.secondary", lineHeight: "12px" },
-            children: /* @__PURE__ */ e("small", { children: b })
-          }
-        ),
-        /* @__PURE__ */ e(u, { display: "flex", mt: 1, width: "100%", children: a ? /* @__PURE__ */ e(
-          o,
+        ] }) : i.extraActions }),
+        n ? /* @__PURE__ */ a(r, { animation: "wave", height: 10, width: "40%" }) : /* @__PURE__ */ a(M, { variant: "caption", children: /* @__PURE__ */ a("small", { children: i.extraInfo }) }),
+        /* @__PURE__ */ a(R, { children: n ? /* @__PURE__ */ a(
+          W,
           {
             variant: "rounded",
             animation: "wave",
             height: 36,
-            width: "100%",
-            sx: { borderRadius: (v) => v.shape.borderRadius }
+            width: "100%"
           }
-        ) : w })
+        ) : i.actions })
       ] })
     ] })
-  ] }) : /* @__PURE__ */ r(L, { children: [
-    a ? /* @__PURE__ */ e(o, { sx: { height: 172 }, animation: "wave", variant: "rectangular" }) : /* @__PURE__ */ e(
-      C,
+  ] }) : /* @__PURE__ */ t(j, { ownerState: e, sx: i.sx, children: [
+    n ? /* @__PURE__ */ a(
+      d,
+      {
+        ownerState: e,
+        animation: "wave",
+        variant: "rectangular"
+      }
+    ) : /* @__PURE__ */ a(
+      o,
       {
-        component: "img",
-        alt: t,
-        height: "172",
-        image: s,
-        sx: { cursor: d ? "pointer" : "default" },
-        onClick: f
+        ownerState: e,
+        alt: i.title,
+        src: i.image,
+        onClick: h.handleClick
       }
     ),
-    /* @__PURE__ */ e(O, { children: a ? /* @__PURE__ */ r(p, { children: [
-      /* @__PURE__ */ e(
-        o,
-        {
-          animation: "wave",
-          height: 10,
-          style: { marginBottom: 16, marginTop: 10 }
-        }
-      ),
-      /* @__PURE__ */ e(
-        o,
-        {
-          animation: "wave",
-          height: 10,
-          style: { marginBottom: 6 }
-        }
-      ),
-      /* @__PURE__ */ e(
-        o,
-        {
-          animation: "wave",
-          height: 10,
-          width: "80%",
-          style: { marginBottom: 8 }
-        }
-      )
-    ] }) : /* @__PURE__ */ r(p, { children: [
-      /* @__PURE__ */ e(
-        g,
+    /* @__PURE__ */ a(P, { children: n ? /* @__PURE__ */ t(l, { children: [
+      /* @__PURE__ */ a(v, { animation: "wave", height: 10 }),
+      /* @__PURE__ */ a(r, { animation: "wave", height: 10 }),
+      /* @__PURE__ */ a(r, { animation: "wave", height: 10, width: "80%" })
+    ] }) : /* @__PURE__ */ t(l, { children: [
+      /* @__PURE__ */ a(
+        m,
         {
+          ownerState: e,
           gutterBottom: !0,
           variant: "subtitle1",
-          component: "h3",
+          as: "h3",
           noWrap: !0,
-          sx: { cursor: d ? "pointer" : "default" },
-          onClick: f,
-          children: t
+          onClick: h.handleClick,
+          children: i.title
         }
       ),
-      /* @__PURE__ */ e(
-        g,
+      /* @__PURE__ */ a(
+        w,
         {
+          ownerState: e,
           variant: "caption",
-          component: "p",
-          sx: {
-            color: "text.secondary",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical",
-            lineHeight: "16px",
-            cursor: d ? "pointer" : "default"
-          },
-          onClick: f,
-          children: /* @__PURE__ */ e("small", { children: n })
+          as: "p",
+          onClick: h.handleClick,
+          children: /* @__PURE__ */ a("small", { children: i.text })
         }
       )
     ] }) }),
-    /* @__PURE__ */ r(
-      W,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          p: (v) => v.spacing(2)
-        },
-        children: [
-          /* @__PURE__ */ r(u, { display: "flex", justifyItems: "center", flex: 1, children: [
-            a ? /* @__PURE__ */ e(
-              o,
-              {
-                animation: "wave",
-                variant: "circular",
-                width: 29,
-                height: 29,
-                sx: { mb: 0.6 }
-              }
-            ) : /* @__PURE__ */ e(M, { src: l.image, sx: { width: 29, height: 29 } }),
-            /* @__PURE__ */ e(u, { display: "flex", flexDirection: "column", ml: 1, flex: 1, children: a ? /* @__PURE__ */ r(p, { children: [
-              /* @__PURE__ */ e(
-                o,
-                {
-                  animation: "wave",
-                  height: 10,
-                  style: { marginBottom: 2, marginTop: 3 },
-                  width: "40%"
-                }
-              ),
-              /* @__PURE__ */ e(o, { animation: "wave", height: 10, width: "60%" })
-            ] }) : /* @__PURE__ */ r(p, { children: [
-              /* @__PURE__ */ e(
-                g,
-                {
-                  variant: "subtitle2",
-                  sx: {
-                    fontWeight: "normal",
-                    lineHeight: "14px",
-                    fontSize: "13px"
-                  },
-                  noWrap: !0,
-                  children: l.title
-                }
-              ),
-              /* @__PURE__ */ e(
-                g,
-                {
-                  variant: "caption",
-                  sx: { color: "text.secondary" },
-                  noWrap: !0,
-                  children: /* @__PURE__ */ e("small", { children: l.subTitle })
-                }
-              )
-            ] }) })
-          ] }),
-          !a && /* @__PURE__ */ e(u, { display: "flex", children: w })
-        ]
-      }
-    ),
-    a === !1 && (m !== void 0 || h !== m) && /* @__PURE__ */ r(U, { className: "extra-actions", children: [
-      m,
-      h
+    /* @__PURE__ */ t(y, { children: [
+      /* @__PURE__ */ t(F, { children: [
+        n ? /* @__PURE__ */ a(
+          u,
+          {
+            animation: "wave",
+            variant: "circular",
+            width: 29,
+            height: 29
+          }
+        ) : /* @__PURE__ */ a(N, { src: i.avatar.image }),
+        /* @__PURE__ */ a(q, { children: n ? /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(
+            r,
+            {
+              animation: "wave",
+              height: 10,
+              width: "40%"
+            }
+          ),
+          /* @__PURE__ */ a(
+            r,
+            {
+              animation: "wave",
+              height: 10,
+              width: "60%"
+            }
+          )
+        ] }) : /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ a(C, { variant: "subtitle2", noWrap: !0, children: i.avatar.title }),
+          /* @__PURE__ */ a(g, { variant: "caption", noWrap: !0, children: /* @__PURE__ */ a("small", { children: i.avatar.subTitle }) })
+        ] }) })
+      ] }),
+      !n && /* @__PURE__ */ a("div", { children: i.actions })
+    ] }),
+    n === !1 && (i.extraActions !== void 0 || i.menu !== i.extraActions) && /* @__PURE__ */ t(z, { className: "extra-actions", children: [
+      i.extraActions,
+      i.menu
     ] })
   ] });
 };
 export {
-  se as Card
+  J as Card
 };