@hybridcore/ui 1.6.0 → 1.6.1

package/dist/components/card/logic.js

@@ -0,0 +1,24 @@
+import { useThemeProps as c } from "@mui/material";
+const p = (s) => {
+  const t = c({ props: s, name: "HCCard" }), { orientation: e = "portrait", loading: n = !1, onClick: o } = t, r = !!o, a = {
+    ...t,
+    orientation: e,
+    loading: n,
+    clickable: r
+  };
+  return {
+    refs: {},
+    state: {
+      ownerState: a,
+      orientation: e,
+      loading: n,
+      clickable: r
+    },
+    actions: { handleClick: () => {
+      o && o();
+    } }
+  };
+};
+export {
+  p as useCardLogic
+};

package/dist/components/card/styled.js

@@ -1,77 +1,252 @@
-import { Card as t, Box as o } from "@mui/material";
-import { s as i } from "../../styled-eZwjUruw.js";
-const s = i(t, {
-  name: "SNCard",
-  // The component name
-  slot: "root"
-  // The slot name
-})(() => ({
+import { styled as a, Card as r, Skeleton as n, CardContent as l, Box as o, Typography as i, Avatar as d, CardActions as c } from "@mui/material";
+const e = (t) => t !== "ownerState", p = a(r, {
+  name: "HCCard",
+  slot: "root",
+  shouldForwardProp: e
+})({
   position: "relative",
   "&:hover .extra-actions": {
     visibility: "visible",
     opacity: 1
   }
-})), d = i(o, {
-  name: "SNCard",
-  slot: "extraActions"
-})(({ theme: a }) => ({
-  position: "absolute",
-  top: 0,
-  right: 0,
+}), g = a(r, {
+  name: "HCCard",
+  slot: "landscapeRoot",
+  shouldForwardProp: e
+})(({ theme: t }) => ({
   display: "flex",
-  gap: a.spacing(1),
-  padding: a.spacing(1.5),
-  visibility: "hidden",
-  opacity: 0,
-  transition: "0.3s all"
-})), p = i(t, {
-  name: "SNCard",
-  // The component name
-  slot: "root"
-  // The slot name
-})(({ theme: a }) => ({
-  display: "flex",
-  padding: a.spacing(1.5),
-  gap: a.spacing(3),
+  padding: t.spacing(1.5),
+  gap: t.spacing(3),
   "& .MuiCardMedia-root": {
-    borderRadius: a.shape.borderRadius
+    borderRadius: t.shape.borderRadius
   },
   "& .MuiCardContent-root, & .MuiCardContent-root:last-child": {
     display: "flex",
     flex: 1,
-    gap: a.spacing(3),
+    gap: t.spacing(3),
     padding: 0,
     margin: 0
   }
-})), l = i(o, {
-  name: "SNCard",
-  // The component name
+})), m = a("img", {
+  name: "HCCard",
+  slot: "media",
+  shouldForwardProp: e
+})(({ ownerState: t }) => ({
+  display: "block",
+  objectFit: "cover",
+  cursor: t.clickable ? "pointer" : "default",
+  ...t.orientation === "landscape" ? { width: 330, height: 200 } : { width: "100%", height: 172 }
+})), x = a(n, {
+  name: "HCCard",
+  slot: "mediaSkeleton",
+  shouldForwardProp: e
+})(
+  ({ ownerState: t }) => t.orientation === "landscape" ? { width: 330, height: 200 } : { height: 172 }
+), f = a(l, {
+  name: "HCCard",
+  slot: "content"
+})({}), b = a(l, {
+  name: "HCCard",
+  slot: "landscapeContent"
+})({
+  position: "relative"
+}), H = a(o, {
+  name: "HCCard",
+  slot: "menuContainer"
+})({
+  position: "absolute",
+  top: -8,
+  right: -8
+}), u = a(o, {
+  name: "HCCard",
+  slot: "contentBody"
+})({
+  flex: 1
+}), h = a(o, {
+  name: "HCCard",
+  slot: "contentColumn"
+})({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  height: "100%"
+}), v = a(i, {
+  name: "HCCard",
+  slot: "title",
+  shouldForwardProp: e
+})(({ ownerState: t }) => ({
+  cursor: t.clickable ? "pointer" : "default",
+  ...t.orientation === "landscape" && {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: "vertical"
+  }
+})), y = a(i, {
+  name: "HCCard",
+  slot: "text",
+  shouldForwardProp: e
+})(({ theme: t, ownerState: s }) => ({
+  color: t.palette.text.secondary,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  lineHeight: "16px",
+  cursor: s.clickable ? "pointer" : "default",
+  WebkitLineClamp: s.orientation === "landscape" ? 4 : 2
+})), k = a(o, {
+  name: "HCCard",
+  slot: "stats"
+})({}), A = a(o, {
+  name: "HCCard",
   slot: "infoBox"
-  // The slot name
-})(({ theme: a }) => ({
+})(({ theme: t }) => ({
   display: "flex",
   flexDirection: "column",
   width: 260,
-  paddingLeft: a.spacing(2),
-  paddingRight: a.spacing(2),
-  gap: a.spacing(0.5),
+  paddingLeft: t.spacing(2),
+  paddingRight: t.spacing(2),
+  gap: t.spacing(0.5),
   alignItems: "center",
   borderLeft: "1px solid",
-  borderColor: a.palette.divider,
+  borderColor: t.palette.divider,
   boxSizing: "border-box"
-})), c = i(o, {
-  name: "SNCard",
+})), L = a(d, {
+  name: "HCCard",
+  slot: "avatar"
+})({
+  width: 29,
+  height: 29
+}), w = a(d, {
+  name: "HCCard",
+  slot: "avatarLarge"
+})({
+  width: 42,
+  height: 42
+}), S = a(i, {
+  name: "HCCard",
+  slot: "avatarTitle"
+})({
+  fontWeight: "normal",
+  lineHeight: "14px",
+  fontSize: "13px"
+}), B = a(i, {
+  name: "HCCard",
+  slot: "avatarSubTitle"
+})(({ theme: t }) => ({
+  color: t.palette.text.secondary,
+  lineHeight: "12px"
+})), R = a(o, {
+  name: "HCCard",
   slot: "extraActions"
-})(({ theme: a }) => ({
+})(({ theme: t }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  display: "flex",
+  gap: t.spacing(1),
+  padding: t.spacing(1.5),
+  visibility: "hidden",
+  opacity: 0,
+  transition: "0.3s all"
+})), T = a(o, {
+  name: "HCCard",
+  slot: "extraActions"
+})(({ theme: t }) => ({
+  display: "flex",
+  gap: t.spacing(1),
+  marginTop: t.spacing(1),
+  marginBottom: t.spacing(1)
+})), I = a(i, {
+  name: "HCCard",
+  slot: "extraInfo"
+})(({ theme: t }) => ({
+  color: t.palette.text.secondary,
+  lineHeight: "12px"
+})), M = a(c, {
+  name: "HCCard",
+  slot: "cardActions"
+})(({ theme: t }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: t.spacing(2)
+})), E = a(o, {
+  name: "HCCard",
+  slot: "avatarRow"
+})({
+  display: "flex",
+  justifyItems: "center",
+  flex: 1
+}), W = a(o, {
+  name: "HCCard",
+  slot: "avatarLabel"
+})(({ theme: t }) => ({
+  display: "flex",
+  flexDirection: "column",
+  marginLeft: t.spacing(1),
+  flex: 1
+})), j = a(o, {
+  name: "HCCard",
+  slot: "actionsContainer"
+})(({ theme: t }) => ({
   display: "flex",
-  gap: a.spacing(1),
-  marginTop: a.spacing(1),
-  marginBottom: a.spacing(1)
+  marginTop: t.spacing(1),
+  width: "100%"
+})), O = a(n, {
+  name: "HCCard",
+  slot: "skeletonLine"
+})({
+  marginBottom: 16,
+  marginTop: 10
+}), D = a(n, {
+  name: "HCCard",
+  slot: "skeletonLineSubtle"
+})({
+  marginBottom: 6
+}), P = a(n, {
+  name: "HCCard",
+  slot: "skeletonAvatarCircle"
+})(({ theme: t }) => ({
+  marginBottom: t.spacing(0.6)
+})), z = a(n, {
+  name: "HCCard",
+  slot: "skeletonExtraIcon"
+})({}), F = a(n, {
+  name: "HCCard",
+  slot: "skeletonActions"
+})(({ theme: t }) => ({
+  borderRadius: t.shape.borderRadius
 }));
 export {
-  c as LandscapeCardExtraActions,
-  p as LandscapeCardRoot,
-  l as LandscapeInfoBox,
-  d as PortraitCardExtraActions,
-  s as PortraitCardRoot
+  j as ActionsContainer,
+  W as AvatarLabel,
+  E as AvatarRow,
+  B as AvatarSubTitle,
+  S as AvatarTitle,
+  M as CardActions,
+  L as CardAvatar,
+  w as CardAvatarLarge,
+  f as CardContent,
+  m as CardMedia,
+  u as ContentBody,
+  h as ContentColumn,
+  I as ExtraInfo,
+  T as LandscapeCardExtraActions,
+  g as LandscapeCardRoot,
+  b as LandscapeContent,
+  A as LandscapeInfoBox,
+  x as MediaSkeleton,
+  H as MenuContainer,
+  R as PortraitCardExtraActions,
+  p as PortraitCardRoot,
+  F as SkeletonActions,
+  P as SkeletonAvatarCircle,
+  z as SkeletonExtraIcon,
+  O as SkeletonLine,
+  D as SkeletonLineSubtle,
+  k as Stats,
+  y as Text,
+  v as Title
 };

package/dist/components/card-alternate/index.js

@@ -1,149 +1,121 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Box as r, Skeleton as t, Typography as l } from "@mui/material";
-import { AlternateCardRoot as b, AlternateCardMenuContainer as v } from "./styled.js";
-const y = ({
-  title: p,
-  subTitle: d,
-  text: o,
-  avatar: h,
-  footer: c,
-  menu: s,
-  extra: w,
-  loading: i,
-  rightMenu: x,
-  onClick: a
-}) => {
-  const m = () => {
-    a && a();
-  };
-  return /* @__PURE__ */ n(
-    b,
-    {
-      sx: {
-        display: "flex"
-      },
-      children: [
-        /* @__PURE__ */ n(r, { flex: 1, children: [
-          s && /* @__PURE__ */ e(v, { className: "menu-container", children: s }),
-          /* @__PURE__ */ n(r, { display: "flex", alignItems: "center", children: [
-            h && /* @__PURE__ */ e(r, { mr: 2, children: i ? /* @__PURE__ */ e(
-              t,
-              {
-                animation: "wave",
-                variant: "circular",
-                width: 42,
-                height: 42
-              }
-            ) : h }),
-            /* @__PURE__ */ n(r, { width: "100%", sx: { minWidth: 0 }, children: [
-              i ? /* @__PURE__ */ e(
-                t,
-                {
-                  animation: "wave",
-                  height: 10,
-                  width: "50%",
-                  sx: { mb: 0.25, mt: 0.35 }
-                }
-              ) : /* @__PURE__ */ e(
-                l,
-                {
-                  gutterBottom: !0,
-                  variant: "subtitle1",
-                  component: "h3",
-                  sx: {
-                    mb: 0,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 3,
-                    WebkitBoxOrient: "vertical",
-                    cursor: a ? "pointer" : "default",
-                    lineHeight: "22px",
-                    overflowWrap: "break-word",
-                    wordBreak: "break-word"
-                  },
-                  onClick: m,
-                  children: p
-                }
-              ),
-              d && (i ? /* @__PURE__ */ e(
-                t,
-                {
-                  animation: "wave",
-                  height: 10,
-                  width: "40%",
-                  sx: { mb: 0.25, mt: 0.35 }
-                }
-              ) : /* @__PURE__ */ e(
-                l,
-                {
-                  variant: "caption",
-                  component: "p",
-                  sx: {
-                    color: "text.secondary",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 4,
-                    WebkitBoxOrient: "vertical",
-                    lineHeight: "16px",
-                    overflowWrap: "break-word",
-                    wordBreak: "break-word"
-                  },
-                  children: d
-                }
-              ))
-            ] })
-          ] }),
-          i ? /* @__PURE__ */ n(r, { children: [
-            /* @__PURE__ */ e(t, { animation: "wave", height: 10, sx: { mb: 0.5, mt: 0.5 } }),
-            /* @__PURE__ */ e(
-              t,
-              {
-                animation: "wave",
-                height: 10,
-                width: "80%",
-                sx: { mb: 0.5 }
-              }
-            )
-          ] }) : /* @__PURE__ */ e(
-            l,
+import { jsxs as n, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { useCardAlternateLogic as T } from "./logic.js";
+import { AlternateCardRoot as p, AlternateCardBody as k, AlternateCardMenuContainer as f, AlternateCardHeaderRow as b, AlternateCardAvatarContainer as M, AlternateCardAvatarSkeleton as R, AlternateCardTitleColumn as S, AlternateCardLineSkeleton as r, AlternateCardTitle as E, AlternateCardSubTitle as I, AlternateCardText as L, AlternateCardRightMenu as j } from "./styled.js";
+const s = 350, F = (l) => {
+  const { state: C, actions: o } = T(l), { ownerState: t } = C, {
+    title: m,
+    subTitle: d,
+    text: i,
+    avatar: h,
+    footer: u,
+    menu: c,
+    extra: A,
+    loading: a,
+    rightMenu: g,
+    sx: v
+  } = l, w = typeof i == "string" ? i.length > s ? `${i.substring(0, s)}...` : i : null;
+  return /* @__PURE__ */ n(p, { ownerState: t, sx: v, children: [
+    /* @__PURE__ */ n(k, { ownerState: t, children: [
+      c && /* @__PURE__ */ e(
+        f,
+        {
+          ownerState: t,
+          className: "menu-container",
+          children: c
+        }
+      ),
+      /* @__PURE__ */ n(b, { ownerState: t, children: [
+        h && /* @__PURE__ */ e(M, { ownerState: t, children: a ? /* @__PURE__ */ e(
+          R,
+          {
+            ownerState: t,
+            animation: "wave",
+            variant: "circular",
+            width: 42,
+            height: 42
+          }
+        ) : h }),
+        /* @__PURE__ */ n(S, { ownerState: t, children: [
+          a ? /* @__PURE__ */ e(
+            r,
             {
-              variant: "caption",
-              component: "p",
-              sx: {
-                color: "text.secondary",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                display: "-webkit-box",
-                WebkitLineClamp: 4,
-                WebkitBoxOrient: "vertical",
-                lineHeight: "16px",
-                cursor: a ? "pointer" : "default",
-                my: 2,
-                overflowWrap: "break-word",
-                wordBreak: "break-word"
-              },
-              onClick: m,
-              children: /* @__PURE__ */ e("small", { children: typeof o == "string" ? o.length > 350 ? `${o.substring(0, 350)}...` : o : null })
+              ownerState: t,
+              animation: "wave",
+              height: 10,
+              width: "50%"
+            }
+          ) : /* @__PURE__ */ e(
+            E,
+            {
+              ownerState: t,
+              gutterBottom: !0,
+              variant: "subtitle1",
+              as: "h3",
+              onClick: o.handleClick,
+              children: m
             }
           ),
-          i ? /* @__PURE__ */ e(
-            t,
+          d && (a ? /* @__PURE__ */ e(
+            r,
             {
+              ownerState: t,
               animation: "wave",
               height: 10,
-              width: "100px",
-              sx: { mb: 1, mt: 1 }
+              width: "40%"
+            }
+          ) : /* @__PURE__ */ e(
+            I,
+            {
+              ownerState: t,
+              variant: "caption",
+              as: "p",
+              children: d
             }
-          ) : c,
-          i ? null : w
-        ] }),
-        /* @__PURE__ */ e(r, { children: x })
-      ]
-    }
-  );
+          ))
+        ] })
+      ] }),
+      a ? /* @__PURE__ */ n(x, { children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            ownerState: t,
+            animation: "wave",
+            height: 10
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            ownerState: t,
+            animation: "wave",
+            height: 10,
+            width: "80%"
+          }
+        )
+      ] }) : /* @__PURE__ */ e(
+        L,
+        {
+          ownerState: t,
+          variant: "caption",
+          as: "p",
+          onClick: o.handleClick,
+          children: /* @__PURE__ */ e("small", { children: w })
+        }
+      ),
+      a ? /* @__PURE__ */ e(
+        r,
+        {
+          ownerState: t,
+          animation: "wave",
+          height: 10,
+          width: "100px"
+        }
+      ) : u,
+      a ? null : A
+    ] }),
+    /* @__PURE__ */ e(j, { ownerState: t, children: g })
+  ] });
 };
 export {
-  y as CardAlternate
+  F as CardAlternate
 };

package/dist/components/card-alternate/logic.js

@@ -0,0 +1,17 @@
+import { useThemeProps as s } from "@mui/material";
+const a = (o) => {
+  const t = s({ props: o, name: "HCCardAlternate" }), { onClick: e } = t, r = () => {
+    e && e();
+  }, n = {
+    ...t,
+    clickable: !!e
+  };
+  return {
+    refs: {},
+    state: { ownerState: n },
+    actions: { handleClick: r }
+  };
+};
+export {
+  a as useCardAlternateLogic
+};