@matteoaliano/forest-ui 0.2.8 → 0.2.10

package/dist/index.js

@@ -13,6 +13,9 @@ var MuiRadioGroup = require('@mui/material/RadioGroup');
 var MuiRadio = require('@mui/material/Radio');
 var MuiSelect = require('@mui/material/Select');
 var MuiMenuItem = require('@mui/material/MenuItem');
+var MuiListItemText = require('@mui/material/ListItemText');
+var MuiFormControl = require('@mui/material/FormControl');
+var MuiInputLabel = require('@mui/material/InputLabel');
 var MuiSwitch = require('@mui/material/Switch');
 var MuiTextField = require('@mui/material/TextField');
 var MuiToggleButton = require('@mui/material/ToggleButton');
@@ -23,9 +26,8 @@ var utils = require('@mui/material/utils');
 var MuiDivider = require('@mui/material/Divider');
 var MuiList = require('@mui/material/List');
 var MuiListItem = require('@mui/material/ListItem');
-var MuiListItemButton = require('@mui/material/ListItemButton');
-var MuiListItemIcon = require('@mui/material/ListItemIcon');
-var MuiListItemText = require('@mui/material/ListItemText');
+var MuiListItemButton2 = require('@mui/material/ListItemButton');
+var ListItemIcon2 = require('@mui/material/ListItemIcon');
 var MuiListItemAvatar = require('@mui/material/ListItemAvatar');
 var MuiListSubheader = require('@mui/material/ListSubheader');
 var MuiTable = require('@mui/material/Table');
@@ -61,6 +63,13 @@ var MuiLinearProgress = require('@mui/material/LinearProgress');
 var MuiCircularProgress = require('@mui/material/CircularProgress');
 var MuiSkeleton = require('@mui/material/Skeleton');
 var MuiSnackbar = require('@mui/material/Snackbar');
+var MuiDrawer = require('@mui/material/Drawer');
+var Box = require('@mui/material/Box');
+var IconButton = require('@mui/material/IconButton');
+var LineChart$1 = require('@mui/x-charts/LineChart');
+var material = require('@mui/material');
+var BarChart$1 = require('@mui/x-charts/BarChart');
+var PieChart$1 = require('@mui/x-charts/PieChart');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -74,6 +83,9 @@ var MuiRadioGroup__default = /*#__PURE__*/_interopDefault(MuiRadioGroup);
 var MuiRadio__default = /*#__PURE__*/_interopDefault(MuiRadio);
 var MuiSelect__default = /*#__PURE__*/_interopDefault(MuiSelect);
 var MuiMenuItem__default = /*#__PURE__*/_interopDefault(MuiMenuItem);
+var MuiListItemText__default = /*#__PURE__*/_interopDefault(MuiListItemText);
+var MuiFormControl__default = /*#__PURE__*/_interopDefault(MuiFormControl);
+var MuiInputLabel__default = /*#__PURE__*/_interopDefault(MuiInputLabel);
 var MuiSwitch__default = /*#__PURE__*/_interopDefault(MuiSwitch);
 var MuiTextField__default = /*#__PURE__*/_interopDefault(MuiTextField);
 var MuiToggleButton__default = /*#__PURE__*/_interopDefault(MuiToggleButton);
@@ -83,9 +95,8 @@ var MuiChip__default = /*#__PURE__*/_interopDefault(MuiChip);
 var MuiDivider__default = /*#__PURE__*/_interopDefault(MuiDivider);
 var MuiList__default = /*#__PURE__*/_interopDefault(MuiList);
 var MuiListItem__default = /*#__PURE__*/_interopDefault(MuiListItem);
-var MuiListItemButton__default = /*#__PURE__*/_interopDefault(MuiListItemButton);
-var MuiListItemIcon__default = /*#__PURE__*/_interopDefault(MuiListItemIcon);
-var MuiListItemText__default = /*#__PURE__*/_interopDefault(MuiListItemText);
+var MuiListItemButton2__default = /*#__PURE__*/_interopDefault(MuiListItemButton2);
+var ListItemIcon2__default = /*#__PURE__*/_interopDefault(ListItemIcon2);
 var MuiListItemAvatar__default = /*#__PURE__*/_interopDefault(MuiListItemAvatar);
 var MuiListSubheader__default = /*#__PURE__*/_interopDefault(MuiListSubheader);
 var MuiTable__default = /*#__PURE__*/_interopDefault(MuiTable);
@@ -120,6 +131,9 @@ var MuiLinearProgress__default = /*#__PURE__*/_interopDefault(MuiLinearProgress)
 var MuiCircularProgress__default = /*#__PURE__*/_interopDefault(MuiCircularProgress);
 var MuiSkeleton__default = /*#__PURE__*/_interopDefault(MuiSkeleton);
 var MuiSnackbar__default = /*#__PURE__*/_interopDefault(MuiSnackbar);
+var MuiDrawer__default = /*#__PURE__*/_interopDefault(MuiDrawer);
+var Box__default = /*#__PURE__*/_interopDefault(Box);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 
 // src/provider/ForestProvider.tsx
 
@@ -213,6 +227,54 @@ var colors = {
     800: "#1849a9",
     900: "#194185",
     950: "#102a56"
+  },
+  teal: {
+    100: "#ccfbef",
+    200: "#99f6e0",
+    600: "#0e9384",
+    700: "#107569"
+  },
+  orange: {
+    100: "#fdead7",
+    200: "#f9dbaf",
+    600: "#e04f16",
+    700: "#b93815"
+  },
+  purple: {
+    100: "#ebe9fe",
+    200: "#d9d6fe",
+    600: "#6938ef",
+    700: "#5925dc"
+  },
+  pink: {
+    100: "#fce7f6",
+    200: "#fcceee",
+    600: "#dd2590",
+    700: "#c11574"
+  },
+  fuchsia: {
+    100: "#fbe8ff",
+    200: "#f6d0fe",
+    600: "#ba24d5",
+    700: "#9f1ab1"
+  },
+  orangeDark: {
+    100: "#ffe6d5",
+    200: "#ffd6ae",
+    600: "#e62e05",
+    700: "#bc1b06"
+  },
+  green: {
+    100: "#d3f8df",
+    200: "#aaf0c4",
+    600: "#099250",
+    700: "#087443"
+  },
+  indigo: {
+    100: "#e0eaff",
+    200: "#c7d7fe",
+    600: "#444ce7",
+    700: "#3538cd"
   }
 };
 var spacing = {
@@ -350,7 +412,7 @@ var bg = {
   secondarySolid: colors.gray[600],
   tertiary: colors.gray[100],
   quaternary: colors.gray[200],
-  active: colors.gray[50],
+  active: colors.gray[200],
   disabled: colors.gray[100],
   disabledSubtle: colors.gray[50],
   overlay: colors.gray[950],
@@ -497,7 +559,7 @@ var iconColors = {
 };
 var navColors = {
   itemIconFg: colors.gray[500],
-  itemIconFgActive: colors.gray[500],
+  itemIconFgActive: colors.gray[700],
   itemButtonIconFg: colors.gray[500],
   itemButtonIconFgActive: colors.gray[700]
 };
@@ -518,15 +580,33 @@ var chartColors = {
   tooltipBg: colors.gray[950],
   tooltipFg: colors.base.white,
   crosshairFg: colors.gray[500],
-  legendFg: colors.gray[700],
-  series1Fg: colors.blue[600],
-  series1FgHover: colors.blue[700],
-  series1Bg: colors.blue[100],
-  series1BgHover: colors.blue[200],
-  series2Fg: colors.brand[600],
-  series2FgHover: colors.brand[700],
-  series2Bg: colors.brand[100],
-  series2BgHover: colors.brand[200]
+  legendFg: text.tertiary,
+  categorical: [
+    "#7B61FF",
+    "#FF7E67",
+    "#76DFD5",
+    "#F6C343",
+    "#B36A6F",
+    "#71BCF6",
+    "#FFB076",
+    "#11819D",
+    "#3CB371",
+    "#FFBCAE",
+    "#C87EED",
+    "#76C5AF"
+  ],
+  vibrant: [
+    "#6B38FB",
+    // 1. Deep Purple
+    "#E85B22",
+    // 2. Deep Orange
+    "#4AABFF",
+    // 3. Bright Blue
+    "#E83B1A",
+    // 4. True Red
+    "#E02088"
+    // 5. Magenta
+  ]
 };
 var alpha = {
   white: {
@@ -557,6 +637,7 @@ var alpha = {
 
 // src/theme/palette.ts
 function buildPalette(tokens) {
+  var _a;
   const { colors: colors3, text: text3, bg: bg3, fg: fg3, border: border3 } = tokens;
   return {
     primary: {
@@ -611,7 +692,8 @@ function buildPalette(tokens) {
       selected: bg3.brandPrimary,
       disabled: fg3.disabled,
       disabledBackground: bg3.disabled
-    }
+    },
+    chart: (_a = tokens.chartColors) != null ? _a : chartColors
   };
 }
 var palette = buildPalette({
@@ -619,7 +701,8 @@ var palette = buildPalette({
   text,
   bg,
   fg,
-  border
+  border,
+  chartColors
 });
 
 // src/theme/typography.ts
@@ -1140,6 +1223,15 @@ function buildComponents(tokens) {
         }
       }
     },
+    // ─── Drawer (used by Sidebar) ─────────────────────────────────
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: bg3.primary,
+          borderRight: `1px solid ${border3.secondary}`
+        }
+      }
+    },
     // ─── Card ───────────────────────────────────────────────────────
     MuiCard: {
       defaultProps: {
@@ -1930,7 +2022,6 @@ var forestPreset = {
 // src/theme/presets/alkemy-plus.ts
 var red = {
   50: "#fef2f2",
-  100: "#fee2e2",
   200: "#fecaca",
   600: "#dc2626",
   700: "#b91c1c",
@@ -1992,7 +2083,15 @@ var colors2 = {
   /** Success — forest defaults (standard UX green) */
   success: colors.success,
   /** Blue (info) — forest defaults (standard UX) */
-  blue: colors.blue
+  blue: colors.blue,
+  teal: colors.teal,
+  orange: colors.orange,
+  purple: colors.purple,
+  pink: colors.pink,
+  fuchsia: colors.fuchsia,
+  orangeDark: colors.orangeDark,
+  green: colors.green,
+  indigo: colors.indigo
 };
 var radius2 = {
   ...radius,
@@ -2212,15 +2311,48 @@ var chartColors2 = {
   tooltipBg: colors2.gray[950],
   tooltipFg: colors2.base.white,
   crosshairFg: colors2.gray[500],
-  legendFg: colors2.gray[700],
-  series1Fg: colors2.brand[600],
-  series1FgHover: colors2.brand[700],
-  series1Bg: colors2.brand[100],
-  series1BgHover: colors2.brand[200],
-  series2Fg: red[600],
-  series2FgHover: red[700],
-  series2Bg: red[100],
-  series2BgHover: red[200]
+  legendFg: text2.tertiary,
+  categorical: [
+    "#7B61FF",
+    "#FF7E67",
+    "#76DFD5",
+    "#F6C343",
+    "#B36A6F",
+    "#71BCF6",
+    "#FFB076",
+    "#11819D",
+    "#3CB371",
+    "#FFBCAE",
+    "#C87EED",
+    "#76C5AF"
+  ],
+  vibrant: [
+    "#6B38FB",
+    "#E85B22",
+    "#4AABFF",
+    "#E83B1A",
+    "#E02088"
+  ],
+  series6Fg: colors2.brand[400],
+  series6FgHover: colors2.brand[500],
+  series6Bg: colors2.brand[100],
+  series6BgHover: colors2.brand[200],
+  series7Fg: colors2.fuchsia[600],
+  series7FgHover: colors2.fuchsia[700],
+  series7Bg: colors2.fuchsia[100],
+  series7BgHover: colors2.fuchsia[200],
+  series8Fg: colors2.teal[600],
+  series8FgHover: colors2.teal[700],
+  series8Bg: colors2.teal[100],
+  series8BgHover: colors2.teal[200],
+  series9Fg: colors2.indigo[600],
+  series9FgHover: colors2.indigo[700],
+  series9Bg: colors2.indigo[100],
+  series9BgHover: colors2.indigo[200],
+  series10Fg: colors2.green[600],
+  series10FgHover: colors2.green[700],
+  series10Bg: colors2.green[100],
+  series10BgHover: colors2.green[200]
 };
 var focusRings2 = {
   brand: "0px 0px 0px 4px #f040403d",
@@ -2350,6 +2482,64 @@ function Select(props) {
 function MenuItem(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiMenuItem__default.default, { ...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__ */ jsxRuntime.jsxs(MuiFormControl__default.default, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(MuiInputLabel__default.default, { id: labelId, shrink: value.length > 0, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      MuiSelect__default.default,
+      {
+        labelId,
+        label,
+        multiple: true,
+        notched: value.length > 0,
+        value,
+        onChange: handleChange,
+        displayEmpty: true,
+        renderValue: renderValue2,
+        ...rest,
+        children: [
+          selectAll && /* @__PURE__ */ jsxRuntime.jsx(
+            MuiButton__default.default,
+            {
+              size: "small",
+              variant: "text",
+              onMouseDown: handleSelectAll,
+              children: allSelected ? "Deselect All" : selectAllLabel
+            }
+          ),
+          options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(MuiMenuItem__default.default, { value: option.value, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, { checked: value.includes(option.value) }),
+            /* @__PURE__ */ jsxRuntime.jsx(MuiListItemText__default.default, { primary: option.label })
+          ] }, option.value))
+        ]
+      }
+    )
+  ] });
+}
 function Switch(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiSwitch__default.default, { ...props });
 }
@@ -2387,10 +2577,10 @@ function ListItem(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiListItem__default.default, { ...props });
 }
 function ListItemButton(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiListItemButton__default.default, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiListItemButton2__default.default, { ...props });
 }
 function ListItemIcon(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiListItemIcon__default.default, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(ListItemIcon2__default.default, { ...props });
 }
 function ListItemText(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiListItemText__default.default, { ...props });
@@ -2500,6 +2690,518 @@ function Skeleton(props) {
 function Snackbar(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiSnackbar__default.default, { ...props });
 }
+var ChevronLeftOutlined_default = utils.createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
+  d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+}), "ChevronLeftOutlined");
+var ChevronRightOutlined_default = utils.createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
+  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), "ChevronRightOutlined");
+var SidebarContext = react.createContext({
+  open: true,
+  collapsedWidth: 48,
+  expandedWidth: 240
+});
+function useSidebar() {
+  return react.useContext(SidebarContext);
+}
+function SidebarNav({
+  open,
+  onOpenChange,
+  expandedWidth = 240,
+  collapsedWidth = 48,
+  behavior = "permanent",
+  showToggle,
+  children,
+  header,
+  footer,
+  sx,
+  ...rest
+}) {
+  const isHover = behavior === "hover";
+  const drawerWidth = open ? expandedWidth : collapsedWidth;
+  const layoutWidth = isHover ? collapsedWidth : drawerWidth;
+  const shouldShowToggle = showToggle != null ? showToggle : !isHover;
+  const hoverHandlers = isHover ? {
+    onMouseEnter: () => onOpenChange(true),
+    onMouseLeave: () => onOpenChange(false)
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box__default.default, { sx: { position: "relative", width: layoutWidth, flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MuiDrawer__default.default,
+      {
+        variant: "permanent",
+        ...rest,
+        ...hoverHandlers,
+        sx: {
+          width: drawerWidth,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            transition: "width 200ms ease-in-out",
+            overflowX: "hidden",
+            boxSizing: "border-box",
+            ...isHover && { zIndex: (theme) => theme.zIndex.drawer + 2 }
+          },
+          ...sx
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Box__default.default,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+              overflow: "hidden"
+            },
+            children: [
+              header && /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, { sx: { flexShrink: 0 }, children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
+              footer && /* @__PURE__ */ jsxRuntime.jsx(Box__default.default, { sx: { flexShrink: 0 }, children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    shouldShowToggle && /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton__default.default,
+      {
+        size: "small",
+        onClick: () => onOpenChange(!open),
+        sx: {
+          position: "absolute",
+          top: "50%",
+          right: 0,
+          transform: "translate(50%, -50%)",
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          width: 28,
+          height: 28,
+          border: 1,
+          borderColor: "divider",
+          backgroundColor: "background.paper",
+          boxShadow: 1,
+          "&:hover": {
+            backgroundColor: "action.hover"
+          },
+          "& .MuiSvgIcon-root": {
+            fontSize: 18
+          }
+        },
+        children: open ? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftOutlined_default, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRightOutlined_default, {})
+      }
+    )
+  ] }) });
+}
+var itemSx = {
+  borderRadius: 1,
+  backgroundColor: bg.primary,
+  color: text.secondary,
+  "& .MuiListItemIcon-root": {
+    color: navColors.itemIconFg
+  },
+  "&:hover": {
+    backgroundColor: bg.primaryHover
+  },
+  "&.Mui-selected": {
+    backgroundColor: bg.active,
+    color: text.primary,
+    "& .MuiListItemIcon-root": {
+      color: navColors.itemIconFgActive
+    },
+    "& .MuiListItemText-primary": {
+      fontWeight: 600
+    },
+    "&:hover": {
+      backgroundColor: bg.primaryHover
+    }
+  }
+};
+function SidebarItem({
+  icon,
+  label,
+  endAdornment,
+  sx,
+  ...rest
+}) {
+  const { open } = useSidebar();
+  if (!open) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MuiTooltip__default.default, { title: label, placement: "right", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MuiListItemButton2__default.default,
+      {
+        ...rest,
+        sx: {
+          ...itemSx,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 40,
+          height: 40,
+          padding: 0,
+          margin: "0 auto",
+          ...sx
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ListItemIcon2__default.default, { sx: { minWidth: "unset", margin: 0, "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(MuiListItemButton2__default.default, { ...rest, sx: { ...itemSx, height: 40, ...sx }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ListItemIcon2__default.default, { sx: { "& .MuiSvgIcon-root": { fontSize: 20 } }, children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx(MuiListItemText__default.default, { primary: label }),
+    endAdornment
+  ] });
+}
+function useChartColors(count, palette2 = "categorical") {
+  const theme = styles.useTheme();
+  const chart = theme.palette.chart;
+  const colors3 = chart[palette2] || chart.categorical || [
+    "#7B61FF",
+    "#FF7E67",
+    "#76DFD5",
+    "#F6C343",
+    "#B36A6F"
+  ];
+  return colors3.slice(0, Math.min(count, colors3.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 = styles.useTheme();
+  if (dataIndex == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      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__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            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__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: "4px",
+                  backgroundColor: color,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: theme.palette.text.secondary,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      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: colors3, palette: palette2 = "categorical", ...props }) {
+  var _a, _b;
+  const theme = styles.useTheme();
+  const chart = theme.palette.chart;
+  const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0, palette2);
+  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__ */ jsxRuntime.jsx(
+    LineChart$1.LineChart,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors3 != null ? colors3 : 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: colors3, palette: palette2 = "categorical", ...props }) {
+  var _a, _b;
+  const theme = styles.useTheme();
+  const chart = theme.palette.chart;
+  const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0, palette2);
+  const resolvedColors = colors3 != null ? colors3 : 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__ */ jsxRuntime.jsx(
+    BarChart$1.BarChart,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors3 != null ? colors3 : 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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "pattern",
+          {
+            id: `striped-pattern-${idx}`,
+            patternUnits: "userSpaceOnUse",
+            width: "8",
+            height: "8",
+            patternTransform: "rotate(45)",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
+            ]
+          },
+          `striped-${idx}`
+        );
+      }) })
+    }
+  );
+}
+function PieChart({ series, colors: colors3, palette: palette2 = "categorical", ...props }) {
+  var _a, _b, _c, _d;
+  const theme = styles.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, palette2);
+  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__ */ jsxRuntime.jsx(
+    PieChart$1.PieChart,
+    {
+      series: modifiedSeries != null ? modifiedSeries : [],
+      colors: colors3 != null ? colors3 : 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
+    }
+  );
+}
 
 exports.Accordion = Accordion;
 exports.AccordionActions = AccordionActions;
@@ -2511,6 +3213,7 @@ exports.AppBar = AppBar;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
+exports.BarChart = BarChart;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
@@ -2530,6 +3233,7 @@ exports.DialogTitle = DialogTitle;
 exports.Divider = Divider;
 exports.Fab = Fab;
 exports.ForestProvider = ForestProvider;
+exports.LineChart = LineChart;
 exports.LinearProgress = LinearProgress;
 exports.List = List;
 exports.ListItem = ListItem;
@@ -2539,10 +3243,14 @@ exports.ListItemIcon = ListItemIcon;
 exports.ListItemText = ListItemText;
 exports.ListSubheader = ListSubheader;
 exports.MenuItem = MenuItem;
+exports.MultiSelect = MultiSelect;
 exports.Paper = Paper;
+exports.PieChart = PieChart;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
+exports.SidebarItem = SidebarItem;
+exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;
 exports.Snackbar = Snackbar;
 exports.Switch = Switch;
@@ -2591,6 +3299,8 @@ exports.spacing = spacing;
 exports.text = text;
 exports.toggleColors = toggleColors;
 exports.tokenShadows = shadows;
+exports.useChartColors = useChartColors;
+exports.useSidebar = useSidebar;
 exports.widths = widths;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map