@matteoaliano/forest-ui 0.2.9 → 0.2.10

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { bg, navColors, text, forestTheme, getPreset, buildTheme } from './chunk-QF5T6J4D.mjs';
-export { alkemyPlusPreset, alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, radius, registerPreset, sliderColors, spacing, text, toggleColors, shadows as tokenShadows, widths } from './chunk-QF5T6J4D.mjs';
+import { bg, navColors, text, forestTheme, getPreset, buildTheme } from './chunk-7B6NCKX3.mjs';
+export { alkemyPlusPreset, alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, radius, registerPreset, sliderColors, spacing, text, toggleColors, shadows as tokenShadows, widths } from './chunk-7B6NCKX3.mjs';
 import { createContext, useMemo, useContext } from 'react';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import MuiAutocomplete from '@mui/material/Autocomplete';
@@ -13,6 +13,9 @@ import MuiRadioGroup from '@mui/material/RadioGroup';
 import MuiRadio from '@mui/material/Radio';
 import MuiSelect from '@mui/material/Select';
 import MuiMenuItem from '@mui/material/MenuItem';
+import MuiListItemText from '@mui/material/ListItemText';
+import MuiFormControl from '@mui/material/FormControl';
+import MuiInputLabel from '@mui/material/InputLabel';
 import MuiSwitch from '@mui/material/Switch';
 import MuiTextField from '@mui/material/TextField';
 import MuiToggleButton from '@mui/material/ToggleButton';
@@ -25,7 +28,6 @@ import MuiList from '@mui/material/List';
 import MuiListItem from '@mui/material/ListItem';
 import MuiListItemButton2 from '@mui/material/ListItemButton';
 import ListItemIcon2 from '@mui/material/ListItemIcon';
-import MuiListItemText from '@mui/material/ListItemText';
 import MuiListItemAvatar from '@mui/material/ListItemAvatar';
 import MuiListSubheader from '@mui/material/ListSubheader';
 import MuiTable from '@mui/material/Table';
@@ -64,6 +66,10 @@ import MuiSnackbar from '@mui/material/Snackbar';
 import MuiDrawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
+import { LineChart as LineChart$1 } from '@mui/x-charts/LineChart';
+import { Box as Box$1, Typography as Typography$1 } from '@mui/material';
+import { BarChart as BarChart$1 } from '@mui/x-charts/BarChart';
+import { PieChart as PieChart$1 } from '@mui/x-charts/PieChart';
 
 function ForestProvider({
   children,
@@ -122,6 +128,64 @@ function Select(props) {
 function MenuItem(props) {
   return /* @__PURE__ */ jsx(MuiMenuItem, { ...props });
 }
+function MultiSelect({
+  options,
+  value,
+  onChange,
+  selectAll = true,
+  selectAllLabel = "Select All",
+  label,
+  ...rest
+}) {
+  const allSelected = options.length > 0 && value.length === options.length;
+  const handleChange = (event) => {
+    const selected = event.target.value;
+    const arr = typeof selected === "string" ? selected.split(",") : selected;
+    onChange(arr);
+  };
+  const handleSelectAll = (e) => {
+    e.stopPropagation();
+    onChange(allSelected ? [] : options.map((o) => o.value));
+  };
+  const labelMap = new Map(options.map((o) => [o.value, o.label]));
+  const renderValue2 = (selected) => selected.map((v) => {
+    var _a;
+    return (_a = labelMap.get(v)) != null ? _a : v;
+  }).join(", ");
+  const labelId = label ? `forest-multiselect-${String(label).replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs(MuiFormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(MuiInputLabel, { id: labelId, shrink: value.length > 0, children: label }),
+    /* @__PURE__ */ jsxs(
+      MuiSelect,
+      {
+        labelId,
+        label,
+        multiple: true,
+        notched: value.length > 0,
+        value,
+        onChange: handleChange,
+        displayEmpty: true,
+        renderValue: renderValue2,
+        ...rest,
+        children: [
+          selectAll && /* @__PURE__ */ jsx(
+            MuiButton,
+            {
+              size: "small",
+              variant: "text",
+              onMouseDown: handleSelectAll,
+              children: allSelected ? "Deselect All" : selectAllLabel
+            }
+          ),
+          options.map((option) => /* @__PURE__ */ jsxs(MuiMenuItem, { value: option.value, children: [
+            /* @__PURE__ */ jsx(MuiCheckbox, { checked: value.includes(option.value) }),
+            /* @__PURE__ */ jsx(MuiListItemText, { primary: option.label })
+          ] }, option.value))
+        ]
+      }
+    )
+  ] });
+}
 function Switch(props) {
   return /* @__PURE__ */ jsx(MuiSwitch, { ...props });
 }
@@ -431,7 +495,360 @@ function SidebarItem({
     endAdornment
   ] });
 }
+function useChartColors(count, palette = "categorical") {
+  const theme = useTheme();
+  const chart = theme.palette.chart;
+  const colors2 = chart[palette] || chart.categorical || [
+    "#7B61FF",
+    "#FF7E67",
+    "#76DFD5",
+    "#F6C343",
+    "#B36A6F"
+  ];
+  return colors2.slice(0, Math.min(count, colors2.length));
+}
+function formatDate(date) {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return String(date);
+  return d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function renderValue(val) {
+  if (val == null) return "0";
+  if (typeof val === "object" && "y" in val) {
+    return String(val.y);
+  }
+  return String(val);
+}
+function CustomTooltip(props) {
+  const { series, axisValue, dataIndex } = props;
+  const theme = useTheme();
+  if (dataIndex == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box$1,
+    {
+      sx: {
+        backgroundColor: theme.palette.common.white,
+        borderRadius: "12px",
+        boxShadow: "0px 12px 24px -4px #1018281a, 0px 4px 8px -2px #1018280f",
+        // Very high elevation shadow per reference
+        padding: "16px",
+        minWidth: "200px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        borderTop: `1px solid ${theme.palette.divider}`,
+        borderRight: `1px solid ${theme.palette.divider}`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        borderLeft: `4px solid ${theme.palette.chart.series1Fg}`
+        // Primary Accent line
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography$1,
+          {
+            variant: "body2",
+            sx: {
+              fontWeight: 600,
+              color: theme.palette.text.primary,
+              marginBottom: "4px"
+            },
+            children: formatDate(axisValue)
+          }
+        ),
+        series.map((s) => {
+          const color = typeof s.getColor === "function" ? s.getColor(dataIndex) : s.color;
+          const value = s.data ? s.data[dataIndex] : null;
+          if (value == null) return null;
+          return /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                sx: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: "4px",
+                  backgroundColor: color,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Typography$1,
+              {
+                variant: "body2",
+                sx: {
+                  color: theme.palette.text.secondary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Box$1,
+                    {
+                      component: "span",
+                      sx: {
+                        backgroundColor: theme.palette.grey[50] || "#f9fafb",
+                        padding: "2px 6px",
+                        borderRadius: "4px",
+                        fontWeight: 500,
+                        color: theme.palette.text.primary,
+                        border: `1px solid ${theme.palette.divider}`
+                      },
+                      children: renderValue(value)
+                    }
+                  ),
+                  " ",
+                  "events"
+                ]
+              }
+            )
+          ] }) }, s.id);
+        })
+      ]
+    }
+  );
+}
+function LineChart({ series, colors: colors2, palette = "categorical", ...props }) {
+  var _a, _b;
+  const theme = useTheme();
+  const chart = theme.palette.chart;
+  const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0, palette);
+  const modifiedSeries = series == null ? void 0 : series.map((s) => {
+    var _a2, _b2;
+    return {
+      ...s,
+      curve: (_a2 = s.curve) != null ? _a2 : "monotoneX",
+      highlightScope: (_b2 = s.highlightScope) != null ? _b2 : { highlighted: "item", faded: "global" }
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    LineChart$1,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors2 != null ? colors2 : seriesColors,
+      grid: { horizontal: true },
+      slots: {
+        axisContent: CustomTooltip
+      },
+      slotProps: {
+        legend: {
+          itemMarkWidth: 12,
+          itemMarkHeight: 12,
+          padding: { bottom: 20 }
+        }
+      },
+      sx: {
+        "& .MuiChartsAxis-line": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-tick": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: chart.labelFg,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body2.fontSize === "number" ? theme.typography.body2.fontSize : 12
+        },
+        "& .MuiChartsAxis-label": {
+          fill: chart.labelFgEmphasis,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14,
+          fontWeight: theme.typography.fontWeightMedium
+        },
+        "& .MuiChartsGrid-line": {
+          stroke: chart.gridlineFg,
+          strokeDasharray: "4 4"
+        },
+        "& .MuiChartsLegend-series text": {
+          fill: chart.legendFg,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: "14px !important"
+        },
+        "& .MuiChartsLegend-mark": {
+          ry: 4,
+          rx: 4,
+          width: 12,
+          height: 12
+        },
+        "& .MuiChartsTooltip-root": {
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14
+        },
+        "& .MuiChartsTooltip-table": {
+          backgroundColor: chart.tooltipBg,
+          color: chart.tooltipFg,
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: theme.shadows[4]
+        },
+        "& .MuiLineElement-root": {
+          strokeWidth: 3
+          // Thicker lines for line charts
+        },
+        ...(_b = props.sx) != null ? _b : {}
+      },
+      ...props
+    }
+  );
+}
+function BarChart({ series, colors: colors2, palette = "categorical", ...props }) {
+  var _a, _b;
+  const theme = useTheme();
+  const chart = theme.palette.chart;
+  const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0, palette);
+  const resolvedColors = colors2 != null ? colors2 : seriesColors;
+  const modifiedSeries = series == null ? void 0 : series.map((s, idx) => {
+    var _a2;
+    const baseColor = s.color || resolvedColors[idx % resolvedColors.length];
+    const actualColor = s.variant === "striped" ? `url(#striped-pattern-${idx})` : baseColor;
+    const { variant, ...rest } = s;
+    return {
+      ...rest,
+      color: actualColor,
+      highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    BarChart$1,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors2 != null ? colors2 : seriesColors,
+      grid: { horizontal: true },
+      borderRadius: 4,
+      slots: {
+        axisContent: CustomTooltip
+      },
+      slotProps: {
+        legend: {
+          itemMarkWidth: 12,
+          itemMarkHeight: 12,
+          padding: { bottom: 20 }
+        }
+      },
+      sx: {
+        "& .MuiChartsAxis-line": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-tick": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: chart.labelFg,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body2.fontSize === "number" ? theme.typography.body2.fontSize : 12
+          // fallback to xs value conceptually if needed
+        },
+        "& .MuiChartsAxis-label": {
+          fill: chart.labelFgEmphasis,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14,
+          fontWeight: theme.typography.fontWeightMedium
+        },
+        "& .MuiChartsGrid-line": {
+          stroke: chart.gridlineFg,
+          strokeDasharray: "4 4"
+        },
+        "& .MuiChartsLegend-series text": {
+          fill: chart.legendFg,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: "14px !important"
+        },
+        "& .MuiChartsLegend-mark": {
+          ry: 4,
+          rx: 4,
+          width: 12,
+          height: 12
+        },
+        "& .MuiChartsTooltip-root": {
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14
+        },
+        "& .MuiChartsTooltip-table": {
+          backgroundColor: chart.tooltipBg,
+          color: chart.tooltipFg,
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: theme.shadows[4]
+          // md equivalent in MUI default array length
+        },
+        ...(_b = props.sx) != null ? _b : {}
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx("defs", { children: series == null ? void 0 : series.map((s, idx) => {
+        if (s.variant !== "striped") return null;
+        const baseColor = s.color || resolvedColors[idx % resolvedColors.length];
+        return /* @__PURE__ */ jsxs(
+          "pattern",
+          {
+            id: `striped-pattern-${idx}`,
+            patternUnits: "userSpaceOnUse",
+            width: "8",
+            height: "8",
+            patternTransform: "rotate(45)",
+            children: [
+              /* @__PURE__ */ jsx("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
+              /* @__PURE__ */ jsx("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
+            ]
+          },
+          `striped-${idx}`
+        );
+      }) })
+    }
+  );
+}
+function PieChart({ series, colors: colors2, palette = "categorical", ...props }) {
+  var _a, _b, _c, _d;
+  const theme = useTheme();
+  const chart = theme.palette.chart;
+  const sliceCount = (_c = (_b = (_a = series == null ? void 0 : series[0]) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
+  const seriesColors = useChartColors(sliceCount, palette);
+  const modifiedSeries = series == null ? void 0 : series.map((s) => {
+    var _a2;
+    return {
+      ...s,
+      highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    PieChart$1,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors2 != null ? colors2 : seriesColors,
+      slotProps: {
+        legend: {
+          itemMarkWidth: 12,
+          itemMarkHeight: 12,
+          padding: { bottom: 20 }
+        }
+      },
+      sx: {
+        "& .MuiChartsLegend-series text": {
+          fill: chart.legendFg,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: "14px !important"
+        },
+        "& .MuiChartsLegend-mark": {
+          ry: 4,
+          rx: 4,
+          width: 12,
+          height: 12
+        },
+        "& .MuiChartsTooltip-root": {
+          fontFamily: theme.typography.fontFamily,
+          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14
+        },
+        "& .MuiChartsTooltip-table": {
+          backgroundColor: chart.tooltipBg,
+          color: chart.tooltipFg,
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: theme.shadows[4]
+        },
+        ...(_d = props.sx) != null ? _d : {}
+      },
+      ...props
+    }
+  );
+}
 
-export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, Paper, Radio, RadioGroup, Select, SidebarItem, SidebarNav, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, useSidebar };
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, BarChart, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, LineChart, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, MultiSelect, Paper, PieChart, Radio, RadioGroup, Select, SidebarItem, SidebarNav, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, useChartColors, useSidebar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map