@undefine-ui/design-system 3.2.0 → 3.3.0

package/README.md

@@ -551,6 +551,57 @@ The animated logo automatically plays on mount with:
 
 Ideal for splash screens, loading overlays, or brand storytelling moments.
 
+### ApexCharts Styling
+
+The design system provides styling utilities for ApexCharts integration, ensuring charts match the Define theme.
+
+**Installation:**
+
+```bash
+pnpm add apexcharts react-apexcharts
+```
+
+**Usage:**
+
+```tsx
+import ReactApexChart from 'react-apexcharts';
+import { useTheme, styled } from '@mui/material/styles';
+import { apexChartsStyles, getDefaultChartOptions } from '@undefine-ui/design-system';
+
+// Create a styled wrapper
+const ChartWrapper = styled('div')(({ theme }) => ({
+  ...apexChartsStyles(theme)
+}));
+
+function LineChart() {
+  const theme = useTheme();
+
+  const chartOptions = {
+    ...getDefaultChartOptions(theme),
+    xaxis: {
+      ...getDefaultChartOptions(theme).xaxis,
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
+    }
+  };
+
+  const chartSeries = [
+    { name: 'Bookings', data: [10, 41, 35, 51, 49, 62, 69] },
+    { name: 'Revenue', data: [20, 35, 50, 30, 45, 55, 40] }
+  ];
+
+  return (
+    <ChartWrapper>
+      <ReactApexChart type="line" series={chartSeries} options={chartOptions} height={350} />
+    </ChartWrapper>
+  );
+}
+```
+
+**Available exports:**
+
+- `apexChartsStyles(theme)` - CSS styles to apply to a wrapper element (tooltips, legends, labels)
+- `getDefaultChartOptions(theme)` - Default ApexCharts options with theme colors, typography, and grid styling
+
 ## Export surface
 
 Everything is re-exported from `src/index.ts`. Key groups:

package/dist/index.cjs

@@ -112,6 +112,7 @@ __export(index_exports, {
   XMark: () => XMark,
   XMarkSolid: () => XMarkSolid,
   action: () => action,
+  apexChartsStyles: () => apexChartsStyles,
   background: () => background,
   baseAction: () => baseAction,
   basePalette: () => basePalette,
@@ -138,6 +139,7 @@ __export(index_exports, {
   fShortenNumber: () => fShortenNumber,
   formatFullname: () => formatFullname,
   getCurrencySymbol: () => getCurrencySymbol,
+  getDefaultChartOptions: () => getDefaultChartOptions,
   getInitials: () => getInitials,
   getStorage: () => getStorage,
   grey: () => grey,
@@ -1229,6 +1231,292 @@ var menuItem = (theme) => {
   };
 };
 
+// src/theme/styles/apex-charts.ts
+var apexChartsStyles = (theme) => ({
+  // Chart container
+  "& .apexcharts-canvas": {
+    // Tooltip
+    "& .apexcharts-tooltip": {
+      border: "none",
+      boxShadow: theme.customShadows["shadow-md"],
+      borderRadius: theme.radius["radius-md"],
+      backgroundColor: theme.vars.palette.background.paper,
+      color: theme.vars.palette.text.primary,
+      "&.apexcharts-theme-light": {
+        border: `1px solid ${theme.vars.palette.border.subtle}`,
+        backgroundColor: theme.vars.palette.background.paper
+      },
+      "& .apexcharts-tooltip-title": {
+        fontWeight: theme.typography.fontWeightBold,
+        backgroundColor: varAlpha(theme.vars.palette.grey["500Channel"], 0.08),
+        borderColor: theme.vars.palette.border.subtle,
+        color: theme.vars.palette.text.header
+      },
+      "& .apexcharts-tooltip-series-group": {
+        backgroundColor: "transparent"
+      }
+    },
+    // Xaxis & Yaxis labels
+    "& .apexcharts-xaxis-label, & .apexcharts-yaxis-label": {
+      fill: theme.vars.palette.text.secondary
+    },
+    // Xaxis tick
+    "& .apexcharts-xaxis-tick": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Grid
+    "& .apexcharts-gridline": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    "& .apexcharts-grid-borders line": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Data labels
+    "& .apexcharts-datalabels-group": {
+      "& .apexcharts-data-labels": {
+        textAnchor: "middle"
+      }
+    },
+    "& .apexcharts-datalabel": {
+      fill: theme.vars.palette.text.primary
+    },
+    "& .apexcharts-datalabel-label": {
+      fill: theme.vars.palette.text.secondary,
+      fontSize: theme.typography.body2.fontSize,
+      fontFamily: theme.typography.fontFamily
+    },
+    "& .apexcharts-datalabel-value": {
+      fill: theme.vars.palette.text.primary,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      fontFamily: theme.typography.fontFamily
+    },
+    // Radar
+    "& .apexcharts-radar-series polygon": {
+      fill: "transparent",
+      stroke: theme.vars.palette.border.subtle
+    },
+    "& .apexcharts-radar-series line": {
+      stroke: theme.vars.palette.border.subtle
+    },
+    // Legend
+    "& .apexcharts-legend": {
+      padding: 0,
+      "& .apexcharts-legend-series": {
+        alignItems: "center",
+        display: "inline-flex !important"
+      },
+      "& .apexcharts-legend-marker": {
+        marginRight: 8
+      },
+      "& .apexcharts-legend-text": {
+        color: `${theme.vars.palette.text.primary} !important`,
+        fontSize: `${theme.typography.body2.fontSize} !important`,
+        fontWeight: `${theme.typography.fontWeightMedium} !important`,
+        fontFamily: theme.typography.fontFamily,
+        lineHeight: "18px",
+        textTransform: "capitalize"
+      }
+    },
+    // Annotations
+    "& .apexcharts-xaxis-annotation-label, & .apexcharts-yaxis-annotation-label": {
+      fill: theme.vars.palette.text.primary
+    },
+    "& .apexcharts-annotation-rect": {
+      fill: varAlpha(theme.vars.palette.grey["500Channel"], 0.08)
+    },
+    // Point annotation
+    "& .apexcharts-point-annotation-label": {
+      fill: theme.vars.palette.text.primary,
+      fontFamily: theme.typography.fontFamily
+    },
+    "& .apexcharts-point-annotation-marker": {
+      stroke: theme.vars.palette.primary.main
+    },
+    // Toolbar icons (hidden by default, enable as needed)
+    "& .apexcharts-toolbar": {
+      "& .apexcharts-reset-icon, & .apexcharts-zoom-icon, & .apexcharts-zoomin-icon, & .apexcharts-zoomout-icon, & .apexcharts-pan-icon, & .apexcharts-selection-icon": {
+        display: "none"
+      }
+    },
+    // Treemap
+    "& .apexcharts-treemap-rect": {
+      stroke: theme.vars.palette.background.paper
+    }
+  }
+});
+var getDefaultChartOptions = (theme) => ({
+  chart: {
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    fontFamily: theme.typography.fontFamily,
+    foreColor: theme.vars.palette.text.secondary
+  },
+  colors: [
+    theme.vars.palette.primary.main,
+    theme.vars.palette.info.main,
+    theme.vars.palette.success.main,
+    theme.vars.palette.warning.main,
+    theme.vars.palette.error.main,
+    theme.vars.palette.secondary.main
+  ],
+  stroke: {
+    width: 2.5,
+    curve: "smooth",
+    lineCap: "round"
+  },
+  grid: {
+    strokeDashArray: 3,
+    borderColor: theme.vars.palette.border.subtle,
+    padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    xaxis: { lines: { show: false } },
+    yaxis: { lines: { show: true } }
+  },
+  xaxis: {
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+    crosshairs: {
+      show: true,
+      stroke: {
+        color: theme.vars.palette.primary.main,
+        width: 2,
+        dashArray: 5
+      }
+    },
+    labels: {
+      style: {
+        colors: theme.vars.palette.text.secondary,
+        fontSize: "12px",
+        fontFamily: theme.typography.fontFamily
+      }
+    }
+  },
+  yaxis: {
+    crosshairs: {
+      show: false
+    },
+    labels: {
+      style: {
+        colors: theme.vars.palette.text.secondary,
+        fontSize: "12px",
+        fontFamily: theme.typography.fontFamily
+      }
+    }
+  },
+  tooltip: {
+    theme: "light",
+    fillSeriesColor: false,
+    x: { show: true },
+    y: {
+      formatter: (value) => value !== void 0 ? `${value}` : value,
+      title: { formatter: (seriesName) => `${seriesName}: ` }
+    },
+    marker: { show: false }
+  },
+  legend: {
+    show: true,
+    position: "top",
+    horizontalAlign: "right",
+    fontSize: "13px",
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: 500,
+    markers: {
+      size: 7,
+      strokeWidth: 0
+    },
+    labels: {
+      colors: theme.vars.palette.text.primary
+    },
+    itemMargin: {
+      horizontal: 12,
+      vertical: 0
+    }
+  },
+  plotOptions: {
+    bar: {
+      borderRadius: 4,
+      columnWidth: "40%",
+      borderRadiusApplication: "end"
+    },
+    pie: {
+      donut: {
+        labels: {
+          show: true,
+          value: {
+            fontWeight: 600,
+            fontFamily: theme.typography.fontFamily
+          },
+          total: {
+            show: true,
+            fontFamily: theme.typography.fontFamily,
+            label: "Total"
+          }
+        }
+      }
+    },
+    radialBar: {
+      track: {
+        background: varAlpha(theme.vars.palette.grey["500Channel"], 0.16)
+      },
+      dataLabels: {
+        value: {
+          fontWeight: 600,
+          fontFamily: theme.typography.fontFamily
+        },
+        total: {
+          fontFamily: theme.typography.fontFamily
+        }
+      }
+    },
+    radar: {
+      polygons: {
+        fill: { colors: ["transparent"] },
+        strokeColors: theme.vars.palette.border.subtle
+      }
+    },
+    polarArea: {
+      rings: {
+        strokeColor: theme.vars.palette.border.subtle
+      },
+      spokes: {
+        connectorColors: theme.vars.palette.border.subtle
+      }
+    }
+  },
+  dataLabels: {
+    enabled: false,
+    dropShadow: { enabled: false },
+    style: {
+      fontFamily: theme.typography.fontFamily
+    }
+  },
+  markers: {
+    size: 4,
+    strokeWidth: 0,
+    hover: {
+      size: 6,
+      sizeOffset: 3,
+      strokeWidth: 7
+    }
+  },
+  fill: {
+    opacity: 1
+  },
+  states: {
+    hover: { filter: { type: "lighten", value: 0.04 } },
+    active: { filter: { type: "darken", value: 0.88 } }
+  },
+  responsive: [
+    {
+      breakpoint: theme.breakpoints.values.sm,
+      options: {
+        plotOptions: {
+          bar: { columnWidth: "60%" }
+        }
+      }
+    }
+  ]
+});
+
 // src/theme/core/colors.json
 var colors_default = {
   primary: {
@@ -9525,6 +9813,7 @@ __reExport(index_exports, components_exports2, module.exports);
   XMark,
   XMarkSolid,
   action,
+  apexChartsStyles,
   background,
   baseAction,
   basePalette,
@@ -9551,6 +9840,7 @@ __reExport(index_exports, components_exports2, module.exports);
   fShortenNumber,
   formatFullname,
   getCurrencySymbol,
+  getDefaultChartOptions,
   getInitials,
   getStorage,
   grey,