@matteoaliano/forest-ui 0.2.10 → 0.2.11

package/dist/index.mjs

@@ -1,6 +1,6 @@
-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 { bg, navColors, text, forestTheme, getPreset, buildTheme, lineHeight, fontSize } from './chunk-6W3RIXXY.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-6W3RIXXY.mjs';
+import React2, { createContext, useMemo, useState, useCallback, useContext } from 'react';
 import { ThemeProvider, useTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -18,11 +18,16 @@ 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 InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import { createSvgIcon } from '@mui/material/utils';
 import MuiToggleButton from '@mui/material/ToggleButton';
 import MuiToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { DatePicker as DatePicker$1 } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import MuiBadge from '@mui/material/Badge';
 import MuiChip from '@mui/material/Chip';
-import { createSvgIcon } from '@mui/material/utils';
 import MuiDivider from '@mui/material/Divider';
 import MuiList from '@mui/material/List';
 import MuiListItem from '@mui/material/ListItem';
@@ -62,10 +67,21 @@ import MuiDialogContentText from '@mui/material/DialogContentText';
 import MuiLinearProgress from '@mui/material/LinearProgress';
 import MuiCircularProgress from '@mui/material/CircularProgress';
 import MuiSkeleton from '@mui/material/Skeleton';
+import MuiModal from '@mui/material/Modal';
+import MuiPopover from '@mui/material/Popover';
 import MuiSnackbar from '@mui/material/Snackbar';
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import MuiLink from '@mui/material/Link';
+import MuiMenu from '@mui/material/Menu';
+import MuiMenuList from '@mui/material/MenuList';
+import MuiPagination from '@mui/material/Pagination';
+import MuiStepper from '@mui/material/Stepper';
+import MuiStep from '@mui/material/Step';
+import MuiStepLabel from '@mui/material/StepLabel';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
 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';
@@ -143,8 +159,7 @@ function MultiSelect({
     const arr = typeof selected === "string" ? selected.split(",") : selected;
     onChange(arr);
   };
-  const handleSelectAll = (e) => {
-    e.stopPropagation();
+  const handleSelectAll = () => {
     onChange(allSelected ? [] : options.map((o) => o.value));
   };
   const labelMap = new Map(options.map((o) => [o.value, o.label]));
@@ -169,12 +184,14 @@ function MultiSelect({
         ...rest,
         children: [
           selectAll && /* @__PURE__ */ jsx(
-            MuiButton,
+            "li",
             {
-              size: "small",
-              variant: "text",
-              onMouseDown: handleSelectAll,
-              children: allSelected ? "Deselect All" : selectAllLabel
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSelectAll();
+              },
+              children: /* @__PURE__ */ jsx(MuiButton, { size: "small", variant: "text", children: allSelected ? "Deselect All" : selectAllLabel })
             }
           ),
           options.map((option) => /* @__PURE__ */ jsxs(MuiMenuItem, { value: option.value, children: [
@@ -192,12 +209,72 @@ function Switch(props) {
 function TextField(props) {
   return /* @__PURE__ */ jsx(MuiTextField, { ...props });
 }
+var Search_default = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+}), "Search");
+var Clear_default = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Clear");
+function Search({
+  value: controlledValue,
+  onChange,
+  onClear,
+  placeholder = "Search\u2026",
+  slotProps,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState("");
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const handleChange = useCallback(
+    (e) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange == null ? void 0 : onChange(e);
+    },
+    [isControlled, onChange]
+  );
+  const handleClear = useCallback(() => {
+    if (!isControlled) setInternalValue("");
+    onClear == null ? void 0 : onClear();
+  }, [isControlled, onClear]);
+  return /* @__PURE__ */ jsx(
+    MuiTextField,
+    {
+      variant: "outlined",
+      placeholder,
+      value: currentValue,
+      onChange: handleChange,
+      slotProps: {
+        ...slotProps,
+        input: {
+          sx: { pl: "12px", gap: 0 },
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { mr: 0 }, children: /* @__PURE__ */ jsx(Search_default, { sx: { fontSize: 20 } }) }),
+          endAdornment: currentValue ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "clear search",
+              onClick: handleClear,
+              edge: "end",
+              size: "small",
+              children: /* @__PURE__ */ jsx(Clear_default, { fontSize: "small" })
+            }
+          ) }) : null,
+          ...typeof (slotProps == null ? void 0 : slotProps.input) === "object" ? slotProps.input : {}
+        }
+      },
+      ...props
+    }
+  );
+}
 function ToggleButton(props) {
   return /* @__PURE__ */ jsx(MuiToggleButton, { ...props });
 }
 function ToggleButtonGroup(props) {
   return /* @__PURE__ */ jsx(MuiToggleButtonGroup, { ...props });
 }
+function DatePicker(props) {
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(DatePicker$1, { ...props }) });
+}
 function Badge(props) {
   return /* @__PURE__ */ jsx(MuiBadge, { ...props });
 }
@@ -300,9 +377,9 @@ function CardMedia(props) {
 function Paper(props) {
   return /* @__PURE__ */ jsx(MuiPaper, { ...props });
 }
-function Alert(props) {
-  return /* @__PURE__ */ jsx(MuiAlert, { ...props });
-}
+var Alert = React2.forwardRef(function Alert2(props, ref) {
+  return /* @__PURE__ */ jsx(MuiAlert, { ref, ...props });
+});
 function AlertTitle(props) {
   return /* @__PURE__ */ jsx(MuiAlertTitle, { ...props });
 }
@@ -333,9 +410,45 @@ function CircularProgress(props) {
 function Skeleton(props) {
   return /* @__PURE__ */ jsx(MuiSkeleton, { ...props });
 }
+function Modal(props) {
+  return /* @__PURE__ */ jsx(MuiModal, { ...props });
+}
+function Popover(props) {
+  return /* @__PURE__ */ jsx(MuiPopover, { ...props });
+}
 function Snackbar(props) {
   return /* @__PURE__ */ jsx(MuiSnackbar, { ...props });
 }
+function Breadcrumbs(props) {
+  return /* @__PURE__ */ jsx(MuiBreadcrumbs, { ...props });
+}
+function Link(props) {
+  return /* @__PURE__ */ jsx(MuiLink, { ...props });
+}
+function Menu(props) {
+  return /* @__PURE__ */ jsx(MuiMenu, { ...props });
+}
+function MenuList(props) {
+  return /* @__PURE__ */ jsx(MuiMenuList, { ...props });
+}
+function Pagination(props) {
+  return /* @__PURE__ */ jsx(MuiPagination, { ...props });
+}
+function Stepper(props) {
+  return /* @__PURE__ */ jsx(MuiStepper, { ...props });
+}
+function Step(props) {
+  return /* @__PURE__ */ jsx(MuiStep, { ...props });
+}
+function StepLabel(props) {
+  return /* @__PURE__ */ jsx(MuiStepLabel, { ...props });
+}
+function Tabs(props) {
+  return /* @__PURE__ */ jsx(MuiTabs, { ...props });
+}
+function Tab(props) {
+  return /* @__PURE__ */ jsx(MuiTab, { ...props });
+}
 var ChevronLeftOutlined_default = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
 }), "ChevronLeftOutlined");
@@ -495,16 +608,10 @@ function SidebarItem({
     endAdornment
   ] });
 }
-function useChartColors(count, palette = "categorical") {
+function useChartColors(count) {
   const theme = useTheme();
   const chart = theme.palette.chart;
-  const colors2 = chart[palette] || chart.categorical || [
-    "#7B61FF",
-    "#FF7E67",
-    "#76DFD5",
-    "#F6C343",
-    "#B36A6F"
-  ];
+  const colors2 = chart.series.map((s) => s.fg);
   return colors2.slice(0, Math.min(count, colors2.length));
 }
 function formatDate(date) {
@@ -547,8 +654,7 @@ function CustomTooltip(props) {
         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
+        borderLeft: `4px solid ${theme.palette.chart.series[0].fg}`
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -617,16 +723,16 @@ function CustomTooltip(props) {
     }
   );
 }
-function LineChart({ series, colors: colors2, palette = "categorical", ...props }) {
+function LineChart({ series, colors: colors2, ...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 seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
     var _a2, _b2;
     return {
       ...s,
-      curve: (_a2 = s.curve) != null ? _a2 : "monotoneX",
+      curve: (_a2 = s.curve) != null ? _a2 : "linear",
       highlightScope: (_b2 = s.highlightScope) != null ? _b2 : { highlighted: "item", faded: "global" }
     };
   });
@@ -647,17 +753,18 @@ function LineChart({ series, colors: colors2, palette = "categorical", ...props
         }
       },
       sx: {
-        "& .MuiChartsAxis-line": { stroke: chart.axisFg },
-        "& .MuiChartsAxis-tick": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-line": { stroke: `${chart.axisFg} !important` },
+        "& .MuiChartsAxis-tick": { stroke: `${chart.axisFg} !important` },
         "& .MuiChartsAxis-tickLabel": {
-          fill: chart.labelFg,
-          fontFamily: theme.typography.fontFamily,
-          fontSize: typeof theme.typography.body2.fontSize === "number" ? theme.typography.body2.fontSize : 12
+          fill: `${chart.labelFg} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
+          fontSize: `${fontSize.xxs}px !important`,
+          lineHeight: lineHeight.xxs
         },
         "& .MuiChartsAxis-label": {
-          fill: chart.labelFgEmphasis,
-          fontFamily: theme.typography.fontFamily,
-          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14,
+          fill: `${chart.labelFgEmphasis} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
+          fontSize: `${typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14}px !important`,
           fontWeight: theme.typography.fontWeightMedium
         },
         "& .MuiChartsGrid-line": {
@@ -665,8 +772,8 @@ function LineChart({ series, colors: colors2, palette = "categorical", ...props
           strokeDasharray: "4 4"
         },
         "& .MuiChartsLegend-series text": {
-          fill: chart.legendFg,
-          fontFamily: theme.typography.fontFamily,
+          fill: `${chart.legendFg} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
           fontSize: "14px !important"
         },
         "& .MuiChartsLegend-mark": {
@@ -687,7 +794,9 @@ function LineChart({ series, colors: colors2, palette = "categorical", ...props
         },
         "& .MuiLineElement-root": {
           strokeWidth: 3
-          // Thicker lines for line charts
+        },
+        "& .MuiMarkElement-root": {
+          display: "none"
         },
         ...(_b = props.sx) != null ? _b : {}
       },
@@ -695,11 +804,11 @@ function LineChart({ series, colors: colors2, palette = "categorical", ...props
     }
   );
 }
-function BarChart({ series, colors: colors2, palette = "categorical", ...props }) {
+function BarChart({ series, colors: colors2, ...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 seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const resolvedColors = colors2 != null ? colors2 : seriesColors;
   const modifiedSeries = series == null ? void 0 : series.map((s, idx) => {
     var _a2;
@@ -730,18 +839,18 @@ function BarChart({ series, colors: colors2, palette = "categorical", ...props }
         }
       },
       sx: {
-        "& .MuiChartsAxis-line": { stroke: chart.axisFg },
-        "& .MuiChartsAxis-tick": { stroke: chart.axisFg },
+        "& .MuiChartsAxis-line": { stroke: `${chart.axisFg} !important` },
+        "& .MuiChartsAxis-tick": { stroke: `${chart.axisFg} !important` },
         "& .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
+          fill: `${chart.labelFg} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
+          fontSize: `${fontSize.xxs}px !important`,
+          lineHeight: lineHeight.xxs
         },
         "& .MuiChartsAxis-label": {
-          fill: chart.labelFgEmphasis,
-          fontFamily: theme.typography.fontFamily,
-          fontSize: typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14,
+          fill: `${chart.labelFgEmphasis} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
+          fontSize: `${typeof theme.typography.body1.fontSize === "number" ? theme.typography.body1.fontSize : 14}px !important`,
           fontWeight: theme.typography.fontWeightMedium
         },
         "& .MuiChartsGrid-line": {
@@ -749,8 +858,8 @@ function BarChart({ series, colors: colors2, palette = "categorical", ...props }
           strokeDasharray: "4 4"
         },
         "& .MuiChartsLegend-series text": {
-          fill: chart.legendFg,
-          fontFamily: theme.typography.fontFamily,
+          fill: `${chart.legendFg} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
           fontSize: "14px !important"
         },
         "& .MuiChartsLegend-mark": {
@@ -768,7 +877,6 @@ function BarChart({ series, colors: colors2, palette = "categorical", ...props }
           color: chart.tooltipFg,
           borderRadius: theme.shape.borderRadius,
           boxShadow: theme.shadows[4]
-          // md equivalent in MUI default array length
         },
         ...(_b = props.sx) != null ? _b : {}
       },
@@ -795,12 +903,12 @@ function BarChart({ series, colors: colors2, palette = "categorical", ...props }
     }
   );
 }
-function PieChart({ series, colors: colors2, palette = "categorical", ...props }) {
+function PieChart({ series, colors: colors2, ...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 seriesColors = useChartColors(sliceCount);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
     var _a2;
     return {
@@ -822,8 +930,8 @@ function PieChart({ series, colors: colors2, palette = "categorical", ...props }
       },
       sx: {
         "& .MuiChartsLegend-series text": {
-          fill: chart.legendFg,
-          fontFamily: theme.typography.fontFamily,
+          fill: `${chart.legendFg} !important`,
+          fontFamily: `${theme.typography.fontFamily} !important`,
           fontSize: "14px !important"
         },
         "& .MuiChartsLegend-mark": {
@@ -849,6 +957,6 @@ function PieChart({ series, colors: colors2, palette = "categorical", ...props }
   );
 }
 
-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 };
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, BarChart, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, DatePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, LineChart, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, MenuList, Modal, MultiSelect, Pagination, Paper, PieChart, Popover, Radio, RadioGroup, Search, Select, SidebarItem, SidebarNav, Skeleton, Snackbar, Step, StepLabel, Stepper, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tabs, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, useChartColors, useSidebar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map