@ttoss/react-dashboard 0.3.3 → 0.3.5

package/README.md

@@ -521,9 +521,9 @@ type TrendIndicator = {
 
 **Behavior:**
 
-- **Positive status**: Displays an up arrow icon and the percentage value (e.g., "10.5% vs. período anterior")
-- **Negative status**: Displays a down arrow icon and the percentage value (e.g., "5.2% vs. período anterior")
-- **Neutral status**: Displays no arrow icon, only the percentage value (e.g., "0.0% vs. período anterior")
+- **Positive status**: Displays an up arrow icon and the percentage value (e.g., "10.5% vs. anterior")
+- **Negative status**: Displays a down arrow icon and the percentage value (e.g., "5.2% vs. anterior")
+- **Neutral status**: Displays no arrow icon, only the percentage value (e.g., "0.0% vs. anterior")
 - The value is always formatted to 1 decimal place followed by "%"
 - Note: Positive values do not include a "+" sign prefix
 

package/dist/esm/index.js

@@ -11,15 +11,15 @@ import { Divider as Divider2, Flex as Flex7 } from "@ttoss/ui";
 
 // src/DashboardGrid.tsx
 import "react-grid-layout/css/styles.css";
-import { Box as Box3, Flex as Flex4, Spinner } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex4, Global, Spinner } from "@ttoss/ui";
 import { Responsive, WidthProvider } from "react-grid-layout";
 
 // src/Cards/BigNumber.tsx
 import { Icon } from "@ttoss/react-icons";
-import { Box as Box2, Flex as Flex2, Text as Text2 } from "@ttoss/ui";
+import { Box as Box2, Flex as Flex2, Text } from "@ttoss/ui";
 
 // src/Cards/Wrapper.tsx
-import { Box, Flex, Text, TooltipIcon } from "@ttoss/ui";
+import { Box, Flex, Heading, TooltipIcon } from "@ttoss/ui";
 var CardWrapper = /* @__PURE__ */__name(({
   title,
   children,
@@ -34,7 +34,7 @@ var CardWrapper = /* @__PURE__ */__name(({
         return "feedback.background.positive.default";
       case "default":
       default:
-        return "display.background.primary.default";
+        return "#f9fafb";
     }
   }, "getBackgroundColor");
   const getTitleColor = /* @__PURE__ */__name(() => {
@@ -45,7 +45,7 @@ var CardWrapper = /* @__PURE__ */__name(({
         return "feedback.text.positive.default";
       case "default":
       default:
-        return "input.background.muted.disabled";
+        return "input.text.muted.default";
     }
   }, "getTitleColor");
   return /* @__PURE__ */React.createElement(Flex, {
@@ -53,36 +53,46 @@ var CardWrapper = /* @__PURE__ */__name(({
       flexDirection: "column",
       gap: "3",
       backgroundColor: getBackgroundColor(),
+      border: "md",
+      borderColor: "display.border.muted.default",
       borderRadius: "lg",
-      padding: "4",
+      padding: "6",
       width: "100%",
-      height: "100%",
-      boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)"
+      height: "100%"
     }
   }, /* @__PURE__ */React.createElement(Box, {
     sx: {
       alignItems: "center",
       gap: "2"
     }
-  }, /* @__PURE__ */React.createElement(Text, {
+  }, /* @__PURE__ */React.createElement(Flex, {
     sx: {
-      fontSize: "sm",
-      fontWeight: "bold",
-      color: getTitleColor(),
-      flex: 1,
-      minWidth: 0
+      alignItems: "center",
+      justifyContent: "flex-start"
     }
+  }, /* @__PURE__ */React.createElement(Heading, {
+    as: "h6",
+    sx: {
+      textTransform: "uppercase",
+      color: getTitleColor(),
+      textWrapStyle: "pretty"
+    },
+    title
   }, title), description && /* @__PURE__ */React.createElement(TooltipIcon, {
     variant: "info",
-    icon: "ant-design:info-circle-outlined",
+    icon: "info",
     tooltip: {
-      children: description
+      children: description,
+      sx: {
+        maxWidth: "300px"
+      }
     },
     sx: {
-      marginLeft: "2",
-      flexShrink: 0
+      fontSize: "sm",
+      color: getTitleColor(),
+      marginLeft: "2"
     }
-  })), /* @__PURE__ */React.createElement(Flex, {
+  }))), /* @__PURE__ */React.createElement(Flex, {
     sx: {
       flexDirection: "column",
       flex: "auto",
@@ -124,7 +134,7 @@ var getValueColor = /* @__PURE__ */__name((color, variant) => {
     return "feedback.text.positive.default";
   }
   if (!color) {
-    return "display.text.primary.default";
+    return "feedback.text.positive.default";
   }
   if (["green", "accent", "positive"].includes(color.toLowerCase())) {
     return "display.text.accent.default";
@@ -133,9 +143,18 @@ var getValueColor = /* @__PURE__ */__name((color, variant) => {
 }, "getValueColor");
 var getTrendColor = /* @__PURE__ */__name(trend => {
   const colors = {
-    positive: "feedback.text.positive.default",
-    negative: "feedback.text.negative.default",
-    neutral: "display.text.primary.default"
+    positive: {
+      color: "#15803d",
+      backgroundColor: "feedback.background.positive.default"
+    },
+    negative: {
+      color: "feedback.text.negative.default",
+      backgroundColor: "feedback.background.negative.default"
+    },
+    neutral: {
+      color: "input.text.muted.default",
+      backgroundColor: "display.border.muted.default"
+    }
   };
   if (!trend) {
     return colors.neutral;
@@ -164,10 +183,10 @@ var BigNumber = /* @__PURE__ */__name(props => {
       flexDirection: "column",
       gap: "2"
     }
-  }, /* @__PURE__ */React.createElement(Text2, {
+  }, /* @__PURE__ */React.createElement(Text, {
     sx: {
       color: valueColor,
-      fontSize: "2xl",
+      fontSize: "1.65rem",
       fontWeight: "bold",
       lineHeight: "1.2"
     }
@@ -178,23 +197,31 @@ var BigNumber = /* @__PURE__ */__name(props => {
     }
   }, /* @__PURE__ */React.createElement(Box2, {
     sx: {
-      color: getTrendColor(props.trend),
+      color: getTrendColor(props.trend).color,
+      backgroundColor: getTrendColor(props.trend).backgroundColor,
+      padding: "1",
+      fontSize: "xs",
+      fontWeight: "bold",
+      borderRadius: "sm",
       display: "flex",
       alignItems: "center"
     }
   }, props.trend.status === "positive" ? /* @__PURE__ */React.createElement(Icon, {
     icon: "mdi:arrow-up",
-    width: 16
+    width: 12
   }) : props.trend.status === "negative" ? /* @__PURE__ */React.createElement(Icon, {
     icon: "mdi:arrow-down",
-    width: 16
-  }) : null), /* @__PURE__ */React.createElement(Text2, {
+    width: 12
+  }) : /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:minus",
+    width: 12
+  }), props.trend.value.toFixed(1), "%", " "), /* @__PURE__ */React.createElement(Text, {
     sx: {
-      color: getTrendColor(props.trend),
-      fontSize: "sm",
+      color: "input.background.muted.disabled",
+      fontSize: "xs",
       fontWeight: "medium"
     }
-  }, props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
+  }, props.trend ? "vs. anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text, {
     sx: {
       color: getValueColor(props.color, props.variant),
       fontSize: "sm",
@@ -215,7 +242,7 @@ var BigNumber = /* @__PURE__ */__name(props => {
   }, /* @__PURE__ */React.createElement(Icon, {
     icon: props.status.icon,
     width: 16
-  })), /* @__PURE__ */React.createElement(Text2, {
+  })), /* @__PURE__ */React.createElement(Text, {
     sx: {
       color: "feedback.text.positive.default",
       fontSize: "sm",
@@ -235,7 +262,7 @@ var DashboardCard = /* @__PURE__ */__name(props => {
 }, "DashboardCard");
 
 // src/DashboardSectionDivider.tsx
-import { Divider, Flex as Flex3, Text as Text3 } from "@ttoss/ui";
+import { Divider, Flex as Flex3, Text as Text2 } from "@ttoss/ui";
 var DashboardSectionDivider = /* @__PURE__ */__name(({
   title
 }) => {
@@ -249,7 +276,7 @@ var DashboardSectionDivider = /* @__PURE__ */__name(({
       gap: "6",
       paddingTop: "6"
     }
-  }, /* @__PURE__ */React.createElement(Text3, {
+  }, /* @__PURE__ */React.createElement(Text2, {
     sx: {
       color: "input.background.muted.disabled",
       fontSize: "md",
@@ -309,7 +336,13 @@ var DashboardGrid = /* @__PURE__ */__name(({
       width: "100%",
       height: "full"
     }
-  }, loading ? /* @__PURE__ */React.createElement(Flex4, {
+  }, /* @__PURE__ */React.createElement(Global, {
+    styles: {
+      ".react-grid-item:has([data-tooltip-id]:hover)": {
+        zIndex: 1
+      }
+    }
+  }), loading ? /* @__PURE__ */React.createElement(Flex4, {
     sx: {
       width: "100%",
       height: "full",
@@ -321,7 +354,7 @@ var DashboardGrid = /* @__PURE__ */__name(({
     layouts,
     breakpoints,
     cols,
-    rowHeight: 30,
+    rowHeight: 32,
     margin: [10, 10],
     containerPadding: [0, 0]
   }, selectedTemplate.grid.map(item => {
@@ -400,6 +433,7 @@ import { FormFieldDatePicker } from "@ttoss/forms";
 import { FormProvider, useForm } from "@ttoss/forms";
 import * as React3 from "react";
 var DateRangeFilter = /* @__PURE__ */__name(({
+  sx,
   label,
   value,
   presets,
@@ -440,7 +474,8 @@ var DateRangeFilter = /* @__PURE__ */__name(({
   return /* @__PURE__ */React3.createElement(FormProvider, formMethods, /* @__PURE__ */React3.createElement(FormFieldDatePicker, {
     name: "dateRange",
     label,
-    presets
+    presets,
+    sx
   }));
 }, "DateRangeFilter");
 
@@ -579,6 +614,9 @@ var DashboardFilters = /* @__PURE__ */__name(() => {
         });
       case "date-range":
         return /* @__PURE__ */React6.createElement(DateRangeFilter, {
+          sx: {
+            minWidth: "auto"
+          },
           label: filter.label,
           key: filter.key,
           value: filter.value,
@@ -617,7 +655,9 @@ var DashboardContent = /* @__PURE__ */__name(({
       padding: "2",
       width: "100%"
     }
-  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider2, null), /* @__PURE__ */React.createElement(DashboardGrid, {
+  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider2, {
+    color: "display.border.muted.default"
+  }), /* @__PURE__ */React.createElement(DashboardGrid, {
     loading,
     selectedTemplate
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,8 +29,8 @@
     "@ttoss/components": "^2.12.6",
     "@ttoss/forms": "^0.40.1",
     "@ttoss/react-icons": "^0.5.7",
-    "@ttoss/ui": "^6.5.1",
-    "@ttoss/react-i18n": "^2.0.26"
+    "@ttoss/react-i18n": "^2.0.26",
+    "@ttoss/ui": "^6.5.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0"