@ammarkhalidfarooq/dashboard-package 0.5.19 → 0.5.20

package/dist/index.es.js

@@ -902,6 +902,17 @@ var W = 794;
 var H = 1123;
 var MX = 32; // horizontal margin
 var CW = W - MX * 2; // 730 px usable width
+var THEME = {
+  pageBg: "#F8FAFC",
+  panelBg: "#FFFFFF",
+  panelBorder: "#DDE3EA",
+  kpiBg: "#F6F8FF",
+  kpiBorder: "#D9E0FF",
+  tableHeadBg: "#EEF2FF",
+  tableAltBg: "#F8FAFF",
+  muted: "#94A3B8",
+  text: "#111827"
+};
 
 // ─── Number helpers ───────────────────────────────────────────────────────────
 var d$ = function d$(v) {
@@ -995,7 +1006,7 @@ var LineChart = function LineChart(_ref2) {
     return /*#__PURE__*/jsx("div", {
       style: {
         height: height,
-        background: "#F9FAFB",
+        background: THEME.tableAltBg,
         borderRadius: 6
       }
     });
@@ -1038,14 +1049,14 @@ var LineChart = function LineChart(_ref2) {
           y1: y,
           x2: width - PR,
           y2: y,
-          stroke: "#F3F4F6",
+          stroke: "#E5EAF1",
           strokeWidth: 1
         }), /*#__PURE__*/jsx("text", {
           x: PL - 4,
           y: y + 3.5,
           textAnchor: "end",
           fontSize: 9,
-          fill: "#9CA3AF",
+          fill: THEME.muted,
           children: label
         })]
       }, i);
@@ -1071,7 +1082,7 @@ var LineChart = function LineChart(_ref2) {
         y: height - 5,
         textAnchor: "middle",
         fontSize: 9,
-        fill: "#9CA3AF",
+        fill: THEME.muted,
         children: label
       }, i);
     })]
@@ -1105,7 +1116,7 @@ var Donut = function Donut(_ref3) {
       cy: cy,
       r: r,
       fill: "none",
-      stroke: "#E5E7EB",
+      stroke: "#E6EBF5",
       strokeWidth: 12
     }), segments.map(function (seg, i) {
       var dash = seg.value / total * circ;
@@ -1136,7 +1147,7 @@ var Donut = function Donut(_ref3) {
       y: cy + 13,
       textAnchor: "middle",
       fontSize: 9,
-      fill: "#6B7280",
+      fill: THEME.muted,
       children: centerLabel
     })]
   });
@@ -1150,7 +1161,7 @@ var Divider = function Divider(_ref4) {
     mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
   return /*#__PURE__*/jsx("div", {
     style: {
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #E5EAF1",
       marginTop: mt,
       marginBottom: mb
     }
@@ -1165,13 +1176,14 @@ var Panel = function Panel(_ref5) {
     style = _ref5$style === void 0 ? {} : _ref5$style;
   return /*#__PURE__*/jsxs("div", {
     style: _objectSpread2({
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.panelBorder),
       borderRadius: 8,
-      background: "#fff",
+      background: THEME.panelBg,
       padding: 12,
       display: "flex",
       flexDirection: "column",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      boxShadow: "0 1px 0 rgba(15,23,42,0.03)"
     }, style),
     children: [(title || subtitle || action) && /*#__PURE__*/jsxs("div", {
       style: {
@@ -1186,14 +1198,14 @@ var Panel = function Panel(_ref5) {
           style: {
             fontSize: 12,
             fontWeight: 700,
-            color: "#111827",
+            color: THEME.text,
             lineHeight: 1.2
           },
           children: title
         }), subtitle && /*#__PURE__*/jsx("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 2
           },
           children: subtitle
@@ -1220,12 +1232,13 @@ var MiniTable = function MiniTable(_ref6) {
       width: "100%",
       borderCollapse: "collapse",
       fontSize: 9.5,
-      tableLayout: "fixed"
+      tableLayout: "fixed",
+      background: "#fff"
     },
     children: [/*#__PURE__*/jsx("thead", {
       children: /*#__PURE__*/jsx("tr", {
         style: {
-          background: "#F9FAFB"
+          background: THEME.tableHeadBg
         },
         children: head.map(function (h, i) {
           return /*#__PURE__*/jsx("th", {
@@ -1235,8 +1248,8 @@ var MiniTable = function MiniTable(_ref6) {
               fontWeight: 700,
               fontSize: 8.5,
               letterSpacing: "0.3px",
-              color: "#6B7280",
-              borderBottom: "1px solid #E5E7EB"
+              color: "#64748B",
+              borderBottom: "1px solid #DDE3EA"
             },
             children: h
           }, i);
@@ -1246,15 +1259,15 @@ var MiniTable = function MiniTable(_ref6) {
       children: rows.map(function (row, ri) {
         return /*#__PURE__*/jsx("tr", {
           style: {
-            background: ri % 2 === 1 ? "#F9FAFB" : "#fff"
+            background: ri % 2 === 1 ? THEME.tableAltBg : "#fff"
           },
           children: row.map(function (cell, ci) {
             return /*#__PURE__*/jsx("td", {
               style: {
                 padding: "4px 6px",
                 textAlign: ci === 0 ? "left" : "right",
-                color: "#374151",
-                borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+                color: "#334155",
+                borderBottom: ri < rows.length - 1 ? "1px solid #EEF2F7" : "none"
               },
               children: cell
             }, ci);
@@ -1272,10 +1285,10 @@ var KpiCard = function KpiCard(_ref7) {
   var neg = "".concat(trend).trim().startsWith("-");
   return /*#__PURE__*/jsxs("div", {
     style: {
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.kpiBorder),
       borderRadius: 8,
       padding: "10px 12px 9px",
-      background: "#fff",
+      background: THEME.kpiBg,
       width: "100%",
       minWidth: 0,
       boxSizing: "border-box",
@@ -1288,7 +1301,7 @@ var KpiCard = function KpiCard(_ref7) {
         fontSize: 8,
         fontWeight: 700,
         letterSpacing: "0.7px",
-        color: "#6B7280",
+        color: "#64748B",
         textTransform: "uppercase"
       },
       children: title
@@ -1296,7 +1309,7 @@ var KpiCard = function KpiCard(_ref7) {
       style: {
         fontSize: 17,
         fontWeight: 800,
-        color: "#111827",
+        color: THEME.text,
         lineHeight: 1.1,
         marginTop: 2
       },
@@ -1311,7 +1324,7 @@ var KpiCard = function KpiCard(_ref7) {
     }), /*#__PURE__*/jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         lineHeight: 1.4
       },
       children: detail
@@ -1330,7 +1343,7 @@ var StatPair = function StatPair(_ref8) {
     children: [/*#__PURE__*/jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         marginBottom: 1
       },
       children: label
@@ -1366,7 +1379,8 @@ var PageHeader = function PageHeader(_ref9) {
   return /*#__PURE__*/jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
-      borderBottom: "1px solid #E5E7EB",
+      borderBottom: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       flexShrink: 0
     },
     children: [/*#__PURE__*/jsx("div", {
@@ -1385,7 +1399,7 @@ var PageHeader = function PageHeader(_ref9) {
           style: {
             fontSize: 20,
             fontWeight: 800,
-            color: "#111827",
+            color: THEME.text,
             letterSpacing: "-0.5px"
           },
           children: "Madinah"
@@ -1394,7 +1408,7 @@ var PageHeader = function PageHeader(_ref9) {
             fontSize: 8.5,
             fontWeight: 700,
             letterSpacing: "1.5px",
-            color: "#9CA3AF",
+            color: "#94A3B8",
             textTransform: "uppercase"
           },
           children: "PERFORMANCE REPORT"
@@ -1405,7 +1419,7 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 8,
         fontSize: 13.5,
         fontWeight: 700,
-        color: "#111827"
+        color: THEME.text
       },
       children: "Dashboard overview \u2014 Overall"
     }), /*#__PURE__*/jsxs("div", {
@@ -1418,13 +1432,13 @@ var PageHeader = function PageHeader(_ref9) {
         children: [/*#__PURE__*/jsx("div", {
           style: {
             fontSize: 10.5,
-            color: "#374151"
+            color: "#334155"
           },
           children: dateLabel
         }), /*#__PURE__*/jsxs("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 1
           },
           children: ["30-day window \xB7 Generated ", generatedLabel]
@@ -1432,7 +1446,7 @@ var PageHeader = function PageHeader(_ref9) {
       }), /*#__PURE__*/jsxs("div", {
         style: {
           fontSize: 9,
-          color: "#9CA3AF",
+          color: THEME.muted,
           textAlign: "right",
           alignSelf: "flex-end"
         },
@@ -1443,8 +1457,8 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 7,
         display: "inline-flex",
         gap: 5,
-        background: "#F9FAFB",
-        border: "1px solid #E5E7EB",
+        background: "#EEF2FF",
+        border: "1px solid #D7DEFF",
         borderRadius: 4,
         padding: "3px 9px",
         fontSize: 8.5
@@ -1471,14 +1485,15 @@ var PageFooter = function PageFooter(_ref0) {
   return /*#__PURE__*/jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       marginTop: "auto",
       flexShrink: 0
     },
     children: /*#__PURE__*/jsxs("span", {
       style: {
         fontSize: 8,
-        color: "#9CA3AF"
+        color: THEME.muted
       },
       children: ["Confidential \xB7 Generated by Dashboard \xB7 ", generatedLabel, " \xA0\xA0 Page ", page, " of 2 \xB7 madinah.com"]
     })
@@ -1649,7 +1664,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -1816,7 +1831,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",