sevago-library 1.3.14 → 1.3.16

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createTheme as createTheme$2, Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$4, Skeleton, Box, styled as styled$3, InputLabel as InputLabel$1, Link, Paper as Paper$1, Typography as Typography$1, ClickAwayListener, Tooltip, Icon, Badge, Tabs as Tabs$1, Tab as Tab$1, Divider as Divider$1, tooltipClasses, Avatar, AvatarGroup, Popover as Popover$1, CircularProgress as CircularProgress$1, Button as Button$1, Chip as Chip$1, TextField as TextField$1, GlobalStyles as GlobalStyles$2, InputAdornment as InputAdornment$1, debounce as debounce$3, Fade as Fade$1, MenuItem as MenuItem$1, FormControl as FormControl$1, FormHelperText as FormHelperText$1, IconButton as IconButton$1, FormControlLabel, Checkbox, Collapse, Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogActions as DialogActions$1, List as List$2, ListItem as ListItem$1, Pagination, RadioGroup, Radio, TableRow, TableContainer, TableHead, Table, TableBody, Card, CardHeader, CardContent, Select as Select$1, Autocomplete as Autocomplete$1 } from "@mui/material";
+import { createTheme as createTheme$2, Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$4, Skeleton, Box, styled as styled$3, InputLabel as InputLabel$1, Link, Paper as Paper$1, Typography as Typography$1, ClickAwayListener, Tooltip, Icon, Badge, Tabs as Tabs$1, Tab as Tab$1, Divider as Divider$1, tooltipClasses, Avatar, AvatarGroup, Popover as Popover$1, CircularProgress as CircularProgress$1, Button as Button$1, Chip as Chip$1, TextField as TextField$1, GlobalStyles as GlobalStyles$2, InputAdornment as InputAdornment$1, debounce as debounce$3, Fade as Fade$1, MenuItem as MenuItem$1, FormControl as FormControl$1, FormHelperText as FormHelperText$1, IconButton as IconButton$1, FormControlLabel, Checkbox, Collapse, Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogActions as DialogActions$1, List as List$2, ListItem as ListItem$1, Pagination, RadioGroup, Radio, TableRow, TableContainer, TableHead, Table, TableBody, useMediaQuery as useMediaQuery$1, Card, CardHeader, CardContent, Select as Select$1, Autocomplete as Autocomplete$1 } from "@mui/material";
 import dayjs from "dayjs";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
@@ -33402,21 +33402,41 @@ const TypographyGridInfoRow = ({
   label,
   value,
   sx,
+  lineLimit,
   columns = "1fr 2fr",
   layout = "vertical",
   sxValue,
   sxLabel
 }) => {
-  if (layout === "vertical") {
-    return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxs(StackRow, { sx: { display: "grid", gridTemplateColumns: columns, ...sx }, children: [
-      /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textSm.semiBold, ...sxLabel }, children: label }) }),
-      /* @__PURE__ */ jsx(Stack, { sx: { ...TYPOGRAPHY.textSm.regular, ...sxValue }, children: value || "Không có" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxs(Stack, { sx: { gap: 0.5, ...sx }, children: [
-    /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textSm.semiBold, ...sxLabel }, children: label }),
-    /* @__PURE__ */ jsx(Stack, { sx: { ...TYPOGRAPHY.textSm.regular, ...sxValue }, children: value || "Không có" })
-  ] }) });
+  const isGridLayout = layout === "vertical";
+  return /* @__PURE__ */ jsxs(
+    StackRow,
+    {
+      sx: {
+        ...isGridLayout ? { display: "grid", gridTemplateColumns: columns } : { flexDirection: "column", gap: 0.5 },
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textSm.semiBold, color: GRAY[500], ...sxLabel }, children: label }),
+        /* @__PURE__ */ jsx(
+          Typography$1,
+          {
+            sx: {
+              ...TYPOGRAPHY.textSm.regular,
+              ...lineLimit && {
+                display: "-webkit-box",
+                overflow: "hidden",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: lineLimit
+              },
+              ...sxValue
+            },
+            children: checkEmptyText(value)
+          }
+        )
+      ]
+    }
+  );
 };
 const TypographyInfoRow = ({
   label,
@@ -33426,20 +33446,13 @@ const TypographyInfoRow = ({
   lineLimit = 1,
   isColumn = false
 }) => {
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      direction: isColumn ? "column" : "row",
-      sx: { alignItems: "center", gap: PADDING_GAP_ITEM_SMALL, ...sx },
-      children: [
-        label && /* @__PURE__ */ jsxs(Typography$1, { sx: { ...labelSx }, variant: "subtitle1", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx(Stack, { color: "text.secondary", sx: { ...getLimitLineCss(lineLimit), flex: 1 }, children: /* @__PURE__ */ jsx(Typography$1, { children: checkEmptyText(value) }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(StackAlignCenter, { direction: isColumn ? "column" : "row", sx: { gap: PADDING_GAP_ITEM_SMALL, ...sx }, children: [
+    label && /* @__PURE__ */ jsxs(Typography$1, { sx: { color: GRAY[500], ...labelSx }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { sx: { ...getLimitLineCss(lineLimit), flex: 1 }, children: /* @__PURE__ */ jsx(Typography$1, { children: checkEmptyText(value) }) })
+  ] });
 };
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -78328,6 +78341,10 @@ const SystemMonitorScreen = ({
 }) => {
   const theme = useTheme();
   const [tab, setTab] = useState(AppGroup.ALL);
+  const isBelowSm = useMediaQuery$1(theme.breakpoints.down("sm"));
+  const isBelowMd = useMediaQuery$1(theme.breakpoints.down("md"));
+  const isBelowLg = useMediaQuery$1(theme.breakpoints.down("lg"));
+  const appGridColumns = isBelowSm ? 2 : isBelowMd ? 3 : isBelowLg ? 4 : 5;
   const availableApps = React__default.useMemo(
     () => Object.entries(APP_OBJ).filter(([key]) => !(blacklist == null ? void 0 : blacklist.includes(key))).map(([, app]) => {
       const appInfo = app;
@@ -78370,7 +78387,7 @@ const SystemMonitorScreen = ({
       component: MotionBox,
       preset: "fadeInUp",
       sx: {
-        flexDirection: { xs: "column", md: "row" },
+        flexDirection: "row",
         alignItems: "stretch",
         width: "100%",
         minHeight: "100%",
@@ -78381,7 +78398,8 @@ const SystemMonitorScreen = ({
           Stack,
           {
             sx: {
-              width: { xs: "100%", md: 240 },
+              width: { xs: 72, sm: 180, md: 240 },
+              flexShrink: 0,
               gap: 0
             },
             children: availableGroups.map((group) => {
@@ -78393,6 +78411,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,
@@ -78407,7 +78426,7 @@ const SystemMonitorScreen = ({
                   },
                   children: [
                     /* @__PURE__ */ jsx(IconElement, { icon: GROUP_ICONS[group] }),
-                    /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textMd.regular }, children: group })
+                    /* @__PURE__ */ jsx(Typography$1, { sx: { display: { xs: "none", sm: "block" }, ...TYPOGRAPHY.textMd.regular }, children: group })
                   ]
                 },
                 group
@@ -78419,9 +78438,9 @@ const SystemMonitorScreen = ({
           AppGrid,
           {
             apps: appsByGroup,
-            columns: 5,
+            columns: appGridColumns,
             rows: 3,
-            iconSize: 120,
+            iconSize: 60,
             iconRadius: 7,
             onClickApp,
             isShowAppHidden: true