sevago-library 1.3.14 → 1.3.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # sevago-library
 
+## 1.3.16
+
+### Patch Changes
+
+- feat: update value color
+
+## 1.3.15
+
+### Patch Changes
+
+- feat: enhance responsiveness and layout adjustments in SystemMonitorScreen
+
 ## 1.3.14
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -33420,21 +33420,41 @@ const TypographyGridInfoRow = ({
   label,
   value,
   sx,
+  lineLimit,
   columns = "1fr 2fr",
   layout = "vertical",
   sxValue,
   sxLabel
 }) => {
-  if (layout === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { display: "grid", gridTemplateColumns: columns, ...sx }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textSm.semiBold, ...sxLabel }, children: label }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { sx: { ...TYPOGRAPHY.textSm.regular, ...sxValue }, children: value || "Không có" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { sx: { gap: 0.5, ...sx }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textSm.semiBold, ...sxLabel }, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { sx: { ...TYPOGRAPHY.textSm.regular, ...sxValue }, children: value || "Không có" })
-  ] }) });
+  const isGridLayout = layout === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StackRow,
+    {
+      sx: {
+        ...isGridLayout ? { display: "grid", gridTemplateColumns: columns } : { flexDirection: "column", gap: 0.5 },
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textSm.semiBold, color: GRAY[500], ...sxLabel }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            sx: {
+              ...TYPOGRAPHY.textSm.regular,
+              ...lineLimit && {
+                display: "-webkit-box",
+                overflow: "hidden",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: lineLimit
+              },
+              ...sxValue
+            },
+            children: checkEmptyText(value)
+          }
+        )
+      ]
+    }
+  );
 };
 const TypographyInfoRow = ({
   label,
@@ -33444,20 +33464,13 @@ const TypographyInfoRow = ({
   lineLimit = 1,
   isColumn = false
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    material.Stack,
-    {
-      direction: isColumn ? "column" : "row",
-      sx: { alignItems: "center", gap: PADDING_GAP_ITEM_SMALL, ...sx },
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { ...labelSx }, variant: "subtitle1", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { color: "text.secondary", sx: { ...getLimitLineCss(lineLimit), flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: checkEmptyText(value) }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackAlignCenter, { direction: isColumn ? "column" : "row", sx: { gap: PADDING_GAP_ITEM_SMALL, ...sx }, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { color: GRAY[500], ...labelSx }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { sx: { ...getLimitLineCss(lineLimit), flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: checkEmptyText(value) }) })
+  ] });
 };
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -78346,6 +78359,10 @@ const SystemMonitorScreen = ({
 }) => {
   const theme = useTheme();
   const [tab, setTab] = React.useState(AppGroup.ALL);
+  const isBelowSm = material.useMediaQuery(theme.breakpoints.down("sm"));
+  const isBelowMd = material.useMediaQuery(theme.breakpoints.down("md"));
+  const isBelowLg = material.useMediaQuery(theme.breakpoints.down("lg"));
+  const appGridColumns = isBelowSm ? 2 : isBelowMd ? 3 : isBelowLg ? 4 : 5;
   const availableApps = React.useMemo(
     () => Object.entries(APP_OBJ).filter(([key]) => !(blacklist == null ? void 0 : blacklist.includes(key))).map(([, app]) => {
       const appInfo = app;
@@ -78388,7 +78405,7 @@ const SystemMonitorScreen = ({
       component: MotionBox,
       preset: "fadeInUp",
       sx: {
-        flexDirection: { xs: "column", md: "row" },
+        flexDirection: "row",
         alignItems: "stretch",
         width: "100%",
         minHeight: "100%",
@@ -78399,7 +78416,8 @@ const SystemMonitorScreen = ({
           material.Stack,
           {
             sx: {
-              width: { xs: "100%", md: 240 },
+              width: { xs: 72, sm: 180, md: 240 },
+              flexShrink: 0,
               gap: 0
             },
             children: availableGroups.map((group) => {
@@ -78411,6 +78429,7 @@ const SystemMonitorScreen = ({
                   "aria-pressed": isActive,
                   sx: {
                     p: PADDING_GAP_ITEM,
+                    justifyContent: { xs: "center", sm: "flex-start" },
                     border: 0,
                     borderLeft: { md: `3px solid ${isActive ? theme.palette.primary.main : "transparent"}` },
                     borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
@@ -78425,7 +78444,7 @@ const SystemMonitorScreen = ({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: GROUP_ICONS[group] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textMd.regular }, children: group })
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { display: { xs: "none", sm: "block" }, ...TYPOGRAPHY.textMd.regular }, children: group })
                   ]
                 },
                 group
@@ -78437,9 +78456,9 @@ const SystemMonitorScreen = ({
           AppGrid,
           {
             apps: appsByGroup,
-            columns: 5,
+            columns: appGridColumns,
             rows: 3,
-            iconSize: 120,
+            iconSize: 60,
             iconRadius: 7,
             onClickApp,
             isShowAppHidden: true