@rsdoctor/components 0.0.2-beta.0 → 0.0.2-beta.2

package/dist/components/Alert/change.js

@@ -46,9 +46,8 @@ const CodeChangeDrawerContent = ({ data, setIsFixed, cwd }) => {
   ] });
 };
 const CodeChangeAlert = ({ data, cwd }) => {
-  var _a;
   const { title, description = "", level, code, file } = data;
-  const [isFixed, setIsFixed] = useState((_a = file.isFixed) != null ? _a : false);
+  const [isFixed, setIsFixed] = useState(file.isFixed ?? false);
   const navigate = useRuleIndexNavigate(code, data.link);
   const fixFile = (val) => {
     setIsFixed(val);
@@ -72,7 +71,7 @@ const CodeChangeAlert = ({ data, cwd }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: Description,
-      type: isFixed ? "success" : level === "warn" ? "warning" : level,
+      type: isFixed ? "success" : level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(Space, { children: [
         /* @__PURE__ */ jsx(
           TextDrawer,

package/dist/components/Alert/file-relation.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Alert } from "antd";
 const FileRelationAlert = ({ data }) => {
   const { description = "", level } = data;
-  return /* @__PURE__ */ jsx(Alert, { type: level === "warn" ? "warning" : level, description });
+  return /* @__PURE__ */ jsx(Alert, { type: level === "warn" ? "info" : level, description });
 };
 export {
   FileRelationAlert

package/dist/components/Alert/index.css

@@ -27,3 +27,6 @@
   width: 100%;
   height: 100%;
 }
+.ant-alert-warning {
+  border: none;
+}

package/dist/components/Alert/link.js

@@ -14,7 +14,7 @@ const LinkRuleAlert = ({ data }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: description } }),
-      type: level === "warn" ? "warning" : level,
+      type: level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(Button, { type: "link", onClick: navigate, size: "small", children: [
         "More",
         /* @__PURE__ */ jsx(InfoCircleOutlined, {})

package/dist/components/Alert/package-relation.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import React, { useState } from "react";
@@ -24,7 +5,7 @@ import { Space, Alert, Button, Typography, Divider, Tabs, Row, Col, Timeline, Ca
 import { sumBy } from "lodash-es";
 import { Rule, SDK } from "@rsdoctor/types";
 import { ExpandAltOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import { useRuleIndexNavigate, formatSize, useI18n } from "../../utils";
+import { useRuleIndexNavigate, formatSize, useI18n, useWindowWidth } from "../../utils";
 import { TextDrawer } from "../TextDrawer";
 import { Title } from "../Title";
 import { Size, Color } from "../../constants";
@@ -47,7 +28,7 @@ const PackageRelationReasons = ({ data, cwd }) => {
           /* @__PURE__ */ jsx(Timeline, { children: data.map((e, i) => {
             const { dependency, module, relativePath } = e;
             const { statements } = dependency;
-            const { start } = module.isPreferSource ? statements[0].position.source : statements[0].position.transformed;
+            const { start } = statements?.[0]?.position ? module.isPreferSource ? statements[0].position.source : statements[0].position.transformed : { start: { line: 0, column: 0 } };
             const text = `${relativePath}:${start.line}:${start.column || 1}`;
             return /* @__PURE__ */ jsx(
               Timeline.Item,
@@ -75,7 +56,7 @@ const PackageRelationReasons = ({ data, cwd }) => {
         ] }) : /* @__PURE__ */ jsx(Empty, { description: "This package no dependencies" })
       }
     ) }),
-    /* @__PURE__ */ jsx(Col, { span: 12, style: { height: "100%" }, children: /* @__PURE__ */ createElement(FileHightLightViewer, __spreadProps(__spreadValues({}, data[index]), { key: index, cwd })) })
+    /* @__PURE__ */ jsx(Col, { span: 12, style: { height: "100%" }, children: /* @__PURE__ */ createElement(FileHightLightViewer, { ...data[index], key: index, cwd }) })
   ] });
 };
 const PackageRelationReasonsWithServer = withServerAPI({
@@ -87,11 +68,11 @@ const PackageRelationAlert = ({
   data,
   getPackageRelationContentComponent
 }) => {
-  var _a;
   const { level, code, packages } = data;
   const navigate = useRuleIndexNavigate(code, data.link);
   const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
   const totalSizeStr = formatSize(totalSize);
+  const windowWith = useWindowWidth();
   const { name } = packages.find((e) => !!e.target.name).target;
   const versions = packages.map((item) => item.target.version);
   return /* @__PURE__ */ jsx(
@@ -100,7 +81,7 @@ const PackageRelationAlert = ({
       showIcon: true,
       message: /* @__PURE__ */ jsxs(Space, { children: [
         /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
-        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: ((_a = Rule.RuleErrorMap[code]) == null ? void 0 : _a.title) || data.title }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[code]?.title || data.title }),
         /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
         /* @__PURE__ */ jsxs(Typography.Text, { children: [
           /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: name }),
@@ -154,16 +135,16 @@ const PackageRelationAlert = ({
           /* @__PURE__ */ jsx(
             Typography.Paragraph,
             {
-              style: { marginBottom: 0 },
+              style: { marginBottom: 0, width: windowWith > 1500 ? "50vw" : windowWith > 1200 ? "40vw" : "30vw" },
               copyable: { text: el.root },
-              ellipsis: { rows: 2, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
+              ellipsis: { rows: 1, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
               code: true,
               children: el.root
             }
           )
         ] }, el.version);
       }) }),
-      type: level === "warn" ? "warning" : level,
+      type: level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(React.Fragment, { children: [
         packages && packages.length > 0 ? /* @__PURE__ */ jsx(TextDrawer, { text: "Show Relations", buttonProps: { size: "small" }, drawerProps: { title: data.title }, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
           /* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [

package/dist/components/Alert/view.js

@@ -10,7 +10,7 @@ import { CodeViewer } from "../CodeViewer";
 const CodeViewDrawerContent = ({ data, cwd }) => {
   const { file } = data;
   const { path, ranges } = file;
-  const line = ranges == null ? void 0 : ranges[0].start.line;
+  const line = ranges?.[0].start.line;
   return /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
     /* @__PURE__ */ jsx(Title, { text: "Code Viewer" }),
     /* @__PURE__ */ jsx(CodeOpener, { cwd, url: path, loc: isNumber(line) ? String(line) : void 0, code: true, disabled: true }),
@@ -18,10 +18,9 @@ const CodeViewDrawerContent = ({ data, cwd }) => {
   ] });
 };
 const CodeViewAlert = ({ data, cwd }) => {
-  var _a;
   const { title, description = "", level, code, file } = data;
   const navigate = useRuleIndexNavigate(code, data.link);
-  const startLine = (_a = file.ranges) == null ? void 0 : _a[0].start.line;
+  const startLine = file.ranges?.[0].start.line;
   const Description = /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
     /* @__PURE__ */ jsx(Typography.Text, { children: description }),
     /* @__PURE__ */ jsxs(Space, { children: [
@@ -42,7 +41,7 @@ const CodeViewAlert = ({ data, cwd }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: Description,
-      type: level === "warn" ? "warning" : level,
+      type: level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(Space, { children: [
         /* @__PURE__ */ jsx(TextDrawer, { text: "Show Source Code", buttonProps: { size: "small" }, children: /* @__PURE__ */ jsx(CodeViewDrawerContent, { data, cwd }) }),
         /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Alerts/bundle.js

@@ -6,6 +6,7 @@ import { CommonAlertsContainer } from "./common";
 import { withServerAPI } from "../Manifest";
 import { ViewMode } from "../../constants";
 import { PackageRelationReasonsWithServer } from "../Alert/package-relation";
+import { ConfigProvider } from "antd";
 const BundleAlertsBase = ({ filter, project }) => {
   const { errors, root: cwd } = project;
   const bundleAlerts = useBundleAlertsByErrors(errors);
@@ -22,17 +23,30 @@ const BundleAlertsBase = ({ filter, project }) => {
     }
   }, []);
   return /* @__PURE__ */ jsx(
-    CommonAlertsContainer,
+    ConfigProvider,
     {
-      title: "Bundle Alerts",
-      dataSource,
-      extraData: {
-        cwd,
-        getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+      theme: {
+        components: {
+          Alert: {
+            colorInfoBg: "#e6f4ff57",
+            colorInfoBorder: "none"
+          }
+        }
       },
-      viewMode: viewMode.bundleAlerts,
-      setViewMode: setBundleAlertsViewMode,
-      cwd
+      children: /* @__PURE__ */ jsx(
+        CommonAlertsContainer,
+        {
+          title: "Bundle Alerts",
+          dataSource,
+          extraData: {
+            cwd,
+            getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+          },
+          viewMode: viewMode.bundleAlerts,
+          setViewMode: setBundleAlertsViewMode,
+          cwd
+        }
+      )
     }
   );
 };

package/dist/components/Alerts/common.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapse, Space, Radio, Typography, Tooltip } from "antd";
 import { useMemo } from "react";
@@ -36,24 +20,23 @@ const CommonAlertsList = ({ dataSource, extraData }) => {
     [dataSource]
   );
   return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: _dataSource.map((err, i) => {
-    return /* @__PURE__ */ jsx(Alert, __spreadValues({ data: err }, extraData), i);
+    return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
   }) });
 };
 const CommonAlertsGroup = ({ dataSource, extraData }) => {
   const _dataSource = useMemo(() => values(groupBy(dataSource, (e) => e.code)), [dataSource]);
   return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: /* @__PURE__ */ jsx(Collapse, { children: _dataSource.map((el) => {
-    var _a;
     const [first] = el;
     return /* @__PURE__ */ jsx(
       Collapse.Panel,
       {
         header: /* @__PURE__ */ jsxs(Space, { children: [
           /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, style: { cursor: "pointer" }, children: first.code }),
-          /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: ((_a = Rule.RuleErrorMap[first.code]) == null ? void 0 : _a.title) || first.title }),
+          /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[first.code]?.title || first.title }),
           /* @__PURE__ */ jsx(Bdg, { label: "count", value: el.length, type: "error" })
         ] }),
         children: /* @__PURE__ */ jsx(Space, { direction: "vertical", size: 16, children: el.map((err, i) => {
-          return /* @__PURE__ */ jsx(Alert, __spreadValues({ data: err }, extraData), i);
+          return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
         }) })
       },
       first.code

package/dist/components/Badge/index.js

@@ -1,25 +1,5 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "antd";
-import { Color } from "../../constants";
 var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
   BadgeType2["Default"] = "default";
   BadgeType2["Success"] = "success";
@@ -28,10 +8,10 @@ var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
   return BadgeType2;
 })(BadgeType || {});
 const BadgeColorMap = {
-  ["default" /* Default */]: "linear-gradient(to bottom, #1182c2, #0273b4)",
-  ["success" /* Success */]: "linear-gradient(to bottom, #4dc71f, #3fb911)",
-  ["warn" /* Warn */]: "linear-gradient(to bottom, #d9b32f, #c9a319)",
-  ["error" /* Error */]: `linear-gradient(to bottom, #da644e, ${Color.Red})`
+  ["default" /* Default */]: "linear-gradient(to bottom, #3ea2ff 0%, #0072db 100%)",
+  ["success" /* Success */]: "linear-gradient(to bottom, #6cf42a 0%, #52C41A 100%)",
+  ["warn" /* Warn */]: "linear-gradient(to bottom, #ffc100 0%, #f59025 100%)",
+  ["error" /* Error */]: `linear-gradient(to bottom, rgb(250 127 22), #FF4D4F 100%)`
 };
 const Badge = ({ label, value, type = "default", tooltip }) => {
   const height = 22;
@@ -69,24 +49,26 @@ const Badge = ({ label, value, type = "default", tooltip }) => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: __spreadProps(__spreadValues({}, commonStyle), {
+            style: {
+              ...commonStyle,
               borderTopLeftRadius: borderRadius,
               borderBottomLeftRadius: borderRadius,
-              background: "linear-gradient(to bottom, #5d5d5d, #4f4f4f)"
-            }),
+              background: "linear-gradient(to bottom, #525252a3 0%, #1F1F1F 100%)"
+            },
             children: label
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            style: __spreadProps(__spreadValues({}, commonStyle), {
+            style: {
+              ...commonStyle,
               borderTopRightRadius: borderRadius,
               borderBottomRightRadius: borderRadius,
               overflow: "hidden",
               textOverflow: "ellipsis",
               background: BadgeColorMap[type] || BadgeColorMap["default" /* Default */]
-            }),
+            },
             children: value
           }
         )

package/dist/components/Card/diff.d.ts

@@ -6,12 +6,12 @@ export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
   showPercentInTitle?: boolean;
 }
 export interface DiffCardContentProps {
-  data: Client.DoctorClientAssetsDiffItem;
+  data: Client.RsdoctorClientAssetsDiffItem;
   formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
 }
 export interface PercentProps {
   percent: number;
-  state: Client.DoctorClientDiffState;
+  state: Client.RsdoctorClientDiffState;
   fontSize?: React.CSSProperties['fontSize'];
 }
 export declare const SizePercent: React.FC<{

package/dist/components/Card/diff.js

@@ -1,31 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Client } from "@rsdoctor/types";
 import { Segmented, Space, Tooltip, Typography } from "antd";
@@ -34,23 +6,22 @@ import { useState } from "react";
 import { formatSize } from "../../utils";
 import { Color } from "../../constants";
 import { StatisticCard } from "./statistic";
-const SizePercent = (_a) => {
-  var _b = _a, { baseline, current } = _b, rest = __objRest(_b, ["baseline", "current"]);
+const SizePercent = ({ baseline, current, ...rest }) => {
   const diff = Graph.diffSize(baseline, current);
-  return /* @__PURE__ */ jsx(Percent, __spreadValues(__spreadValues({}, rest), diff));
+  return /* @__PURE__ */ jsx(Percent, { ...rest, ...diff });
 };
 const Percent = ({ percent, state, fontSize = 14 }) => {
   const _percent = +percent.toFixed(2);
   if (_percent > 0) {
     const percentText = `${_percent}`;
-    if (state === Client.DoctorClientDiffState.Up) {
+    if (state === Client.RsdoctorClientDiffState.Up) {
       return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Red }, children: [
         "+",
         percentText,
         "%"
       ] });
     }
-    if (state === Client.DoctorClientDiffState.Down) {
+    if (state === Client.RsdoctorClientDiffState.Down) {
       return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Green }, children: [
         "-",
         percentText,

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

@@ -3,5 +3,6 @@ import React, { CSSProperties } from 'react';
 export interface CardProps extends CProps {
   collapsable?: boolean;
   dividerStyle?: CSSProperties;
+  defaultCollapsed?: boolean;
 }
 export declare const Card: React.FC<CardProps>;

package/dist/components/Card/index.js

@@ -1,45 +1,14 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColumnHeightOutlined, VerticalAlignMiddleOutlined } from "@ant-design/icons";
 import { Card as C, Space, Button, Divider } from "antd";
 import { useState } from "react";
-const Card = (_a) => {
-  var _b = _a, { collapsable = false, children, title, dividerStyle } = _b, rest = __objRest(_b, ["collapsable", "children", "title", "dividerStyle"]);
-  const [collapsed, setCollapsed] = useState(false);
+const Card = ({ collapsable = false, children, title, dividerStyle, defaultCollapsed = false, ...rest }) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   if (title && collapsable) {
     return /* @__PURE__ */ jsx(
       C,
-      __spreadProps(__spreadValues({}, rest), {
+      {
+        ...rest,
         title: /* @__PURE__ */ jsxs(Space, { style: { fontSize: "inherit" }, children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -52,10 +21,10 @@ const Card = (_a) => {
           title
         ] }),
         children: collapsed ? /* @__PURE__ */ jsx(Divider, { orientation: "center", style: dividerStyle, plain: true, children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}), type: "text", onClick: () => setCollapsed(!collapsed), children: "show more" }) }) : children
-      })
+      }
     );
   }
-  return /* @__PURE__ */ jsx(C, __spreadProps(__spreadValues({ title }, rest), { children }));
+  return /* @__PURE__ */ jsx(C, { title, ...rest, children });
 };
 export {
   Card

package/dist/components/Card/size.d.ts

@@ -12,5 +12,10 @@ export interface SizeCardProps {
    * @default false
    */
   showProgress?: boolean;
+  tagBgColor: string;
+}
+export interface bgColorType {
+  bgColor: string;
+  tagBgColor: string;
 }
 export declare const SizeCard: React.FC<SizeCardProps>;

package/dist/components/Card/size.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ExceptionOutlined } from "@ant-design/icons";
-import { Progress, Space, Tag, Tooltip, Typography } from "antd";
+import { Empty, Progress, Space, Tag, Tooltip, Typography, theme } from "antd";
 import { sumBy } from "lodash-es";
 import { useMemo } from "react";
 import { createFileStructures, formatSize } from "../../utils";
 import { FileTree } from "../FileTree";
 import { TextDrawer } from "../TextDrawer";
 const height = 100;
-const SizeCard = ({ files, total, showProgress = false }) => {
+const { useToken } = theme;
+const SizeCard = ({ files, total, showProgress = false, tagBgColor }) => {
+  const { token } = useToken();
   const sum = useMemo(() => {
     return sumBy(files, (e) => e.size);
   }, [files]);
@@ -24,10 +26,16 @@ const SizeCard = ({ files, total, showProgress = false }) => {
     });
   }, [files]);
   if (fileStructures.length === 0) {
-    return /* @__PURE__ */ jsx(Space, { style: { height, fontSize: 24 }, align: "center", children: "0" });
+    return /* @__PURE__ */ jsx(Space, { style: { height, fontSize: 24 }, align: "center", children: /* @__PURE__ */ jsx(Tag, { bordered: false, color: tagBgColor, children: /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14, color: token.colorWhite }, children: [
+      /* @__PURE__ */ jsxs(Typography.Text, { style: { color: token.colorWhite }, children: [
+        " ",
+        0
+      ] }),
+      ` Files`
+    ] }) }) });
   }
   return /* @__PURE__ */ jsxs(Space, { style: { height }, align: "center", children: [
-    showProgress ? /* @__PURE__ */ jsx(
+    showProgress ? sum === 0 ? /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsx(
       Progress,
       {
         type: "dashboard",
@@ -41,13 +49,13 @@ const SizeCard = ({ files, total, showProgress = false }) => {
       {
         text: /* @__PURE__ */ jsx(Tooltip, { title: "Click to show the total files", children: /* @__PURE__ */ jsxs(Space, { style: { textAlign: showProgress ? "left" : "center" }, align: "end", children: [
           /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
-            /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14 }, children: [
-              "Count:",
-              /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+            /* @__PURE__ */ jsx(Tag, { bordered: false, color: tagBgColor, children: /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14, color: token.colorWhite }, children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { style: { color: token.colorWhite }, children: [
                 " ",
                 files.length
-              ] })
-            ] }),
+              ] }),
+              ` Files`
+            ] }) }),
             /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 20 }, children: formatSize(sum) })
           ] }),
           /* @__PURE__ */ jsx(ExceptionOutlined, { style: { transform: "translateY(-3.5px)" } })

package/dist/components/Card/statistic.css

@@ -8,8 +8,9 @@
   font-weight: 500;
 }
 .statistic-card-light {
-  background: #fff;
+  background: white;
   border: 1px solid #eee;
+  box-shadow: 0px 0px 50px 0px #dcf2f4;
 }
 .statistic-card-dark {
   background: rgb(20, 20, 20);

package/dist/components/Card/statistic.d.ts

@@ -5,5 +5,8 @@ export interface StatisticCardProps {
   title: string | React.ReactNode;
   value: string | React.ReactNode;
   statisticProps?: StatisticProps;
+  boxProps?: {
+    style?: React.CSSProperties;
+  };
 }
 export declare const StatisticCard: React.FC<StatisticCardProps>;

package/dist/components/Card/statistic.js

@@ -1,32 +1,17 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { jsx } from "react/jsx-runtime";
 import { Statistic } from "antd";
 import "./statistic.css";
 import { useTheme } from "../../utils";
-const StatisticCard = ({ title, value, statisticProps }) => {
+const StatisticCard = ({ title, value, statisticProps, boxProps }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx("div", { className: ["statistic-card", `statistic-card-${theme}`].join(" "), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: ["statistic-card", `statistic-card-${theme}`].join(" "), ...boxProps, children: /* @__PURE__ */ jsx(
     Statistic,
-    __spreadValues({
+    {
       title: /* @__PURE__ */ jsx("div", { className: "statistic-card-title", children: title }),
       valueRender: () => value,
-      valueStyle: { fontSize: 24 }
-    }, statisticProps)
+      valueStyle: { fontSize: 24 },
+      ...statisticProps
+    }
   ) });
 };
 export {