@matteoaliano/forest-ui 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -70,7 +70,7 @@ function ForestProvider({
 }
 
 // src/index.ts
-import { useColorScheme } from "@mui/material/styles";
+import { useColorScheme as useColorScheme2 } from "@mui/material/styles";
 import { InitColorSchemeScript } from "@mui/material";
 
 // src/components/Autocomplete/index.tsx
@@ -1140,9 +1140,215 @@ function SidebarItem({
   ] });
 }
 
+// src/components/AppShell/index.tsx
+import { useState as useState2 } from "react";
+import Box3 from "@mui/material/Box";
+import MuiDrawer3 from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useColorScheme, useTheme } from "@mui/material/styles";
+import MenuOutlined from "@mui/icons-material/MenuOutlined";
+import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
+import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+function ColorModeToggle() {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const resolved = mode === "system" ? systemMode : mode;
+  const isDark = resolved === "dark";
+  return /* @__PURE__ */ jsx20(Tooltip, { title: isDark ? "Switch to light mode" : "Switch to dark mode", children: /* @__PURE__ */ jsx20(
+    IconButton2,
+    {
+      size: "small",
+      color: "inherit",
+      "aria-label": "Toggle color mode",
+      onClick: () => setMode(isDark ? "light" : "dark"),
+      children: isDark ? /* @__PURE__ */ jsx20(LightModeOutlined, { fontSize: "small" }) : /* @__PURE__ */ jsx20(DarkModeOutlined, { fontSize: "small" })
+    }
+  ) });
+}
+function ShellBrand({
+  product,
+  logoVariant
+}) {
+  const { mode, systemMode } = useColorScheme();
+  const dark = (mode === "system" ? systemMode : mode) === "dark";
+  if (logoVariant === "full") {
+    return /* @__PURE__ */ jsx20(Logo, { product, variant: "logo", color: dark ? "negative" : "positive" });
+  }
+  return /* @__PURE__ */ jsx20(Logo, { product, variant: "logomark", color: dark ? "negative" : "default" });
+}
+function AppShell({
+  navItems,
+  nav,
+  product = "studio",
+  logoVariant = "logomark",
+  brand,
+  search,
+  actions,
+  sidebarBehavior = "permanent",
+  defaultSidebarOpen = true,
+  children
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const [sidebarOpen, setSidebarOpen] = useState2(defaultSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState2(false);
+  const navContent = nav != null ? nav : navItems && /* @__PURE__ */ jsx20(List, { children: navItems.map(({ label, icon, active, endAdornment, ...link }) => /* @__PURE__ */ jsx20(
+    SidebarItem,
+    {
+      icon,
+      label,
+      selected: active,
+      endAdornment,
+      ...link
+    },
+    label
+  )) });
+  const brandEl = brand != null ? brand : /* @__PURE__ */ jsx20(ShellBrand, { product, logoVariant });
+  const wrapLogomark = !brand && logoVariant === "logomark" && !isMobile;
+  return /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx20(
+      default51,
+      {
+        position: "sticky",
+        elevation: 0,
+        sx: { zIndex: theme.zIndex.drawer + 1 },
+        children: /* @__PURE__ */ jsxs4(default52, { variant: "dense", sx: { px: { xs: "16px", sm: "16px" } }, children: [
+          /* @__PURE__ */ jsxs4(Box3, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 1 }, children: [
+            isMobile && /* @__PURE__ */ jsx20(
+              IconButton2,
+              {
+                size: "small",
+                color: "inherit",
+                "aria-label": "Open navigation",
+                onClick: () => setMobileOpen(true),
+                children: /* @__PURE__ */ jsx20(MenuOutlined, { fontSize: "small" })
+              }
+            ),
+            wrapLogomark ? /* @__PURE__ */ jsx20(Box3, { sx: { width: 48, ml: "-16px", display: "flex", justifyContent: "center" }, children: brandEl }) : brandEl
+          ] }),
+          /* @__PURE__ */ jsx20(Box3, { sx: { flex: 1, display: "flex", justifyContent: "center" }, children: search === true ? /* @__PURE__ */ jsx20(Search, { size: "small", placeholder: "Search\u2026", sx: { width: "100%", maxWidth: 480 } }) : search || null }),
+          /* @__PURE__ */ jsxs4(Box3, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: [
+            /* @__PURE__ */ jsx20(ColorModeToggle, {}),
+            actions
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", flexGrow: 1, overflow: "hidden" }, children: [
+      !isMobile && navContent && /* @__PURE__ */ jsx20(
+        SidebarNav,
+        {
+          open: sidebarOpen,
+          onOpenChange: setSidebarOpen,
+          behavior: sidebarBehavior,
+          sx: {
+            height: "100%",
+            "& .MuiDrawer-paper": { position: "relative", height: "100%" }
+          },
+          children: navContent
+        }
+      ),
+      /* @__PURE__ */ jsx20(Box3, { component: "main", sx: { flexGrow: 1, overflow: "auto" }, children })
+    ] }),
+    isMobile && navContent && /* @__PURE__ */ jsx20(
+      MuiDrawer3,
+      {
+        open: mobileOpen,
+        onClose: () => setMobileOpen(false),
+        onClick: () => setMobileOpen(false),
+        sx: { "& .MuiDrawer-paper": { width: 240 } },
+        children: navContent
+      }
+    )
+  ] });
+}
+
+// src/components/Page/index.tsx
+import Box4 from "@mui/material/Box";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import MuiLink from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+function Page({
+  title,
+  breadcrumbs,
+  actions,
+  disableGutters = false,
+  maxWidth,
+  sx,
+  children
+}) {
+  return /* @__PURE__ */ jsx21(
+    Box4,
+    {
+      component: "section",
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100%",
+          backgroundColor: "background.paper",
+          ...disableGutters ? {} : { p: 3 }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsxs5(
+        Box4,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            width: "100%",
+            ...maxWidth ? { maxWidth, mx: "auto" } : {}
+          },
+          children: [
+            breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx21(MuiBreadcrumbs, { "aria-label": "breadcrumb", sx: { mb: 1 }, children: breadcrumbs.map(
+              (crumb, i) => i === breadcrumbs.length - 1 ? (
+                // Current page: plain text, not a link.
+                /* @__PURE__ */ jsx21(Typography, { variant: "body2", color: "text.primary", children: crumb.label }, crumb.label)
+              ) : /* @__PURE__ */ jsx21(
+                MuiLink,
+                {
+                  variant: "body2",
+                  underline: "hover",
+                  color: "text.secondary",
+                  ...crumb.component ? { component: crumb.component } : {},
+                  ...crumb.href ? { href: crumb.href } : {},
+                  ...crumb.onClick ? { onClick: crumb.onClick } : {},
+                  children: crumb.label
+                },
+                crumb.label
+              )
+            ) }),
+            /* @__PURE__ */ jsxs5(
+              Box4,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 2,
+                  mb: 3
+                },
+                children: [
+                  /* @__PURE__ */ jsx21(Typography, { variant: "h5", children: title }),
+                  actions && /* @__PURE__ */ jsx21(Box4, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: actions })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/components/Box/index.tsx
 import MuiBox from "@mui/material/Box";
-var Box3 = MuiBox;
+var Box5 = MuiBox;
 
 // src/components/Stack/index.tsx
 import MuiStack from "@mui/material/Stack";
@@ -1203,21 +1409,21 @@ import { default as default107 } from "@mui/material/TextareaAutosize";
 import {
   LineChart as MuiLineChart
 } from "@mui/x-charts/LineChart";
-import { useTheme as useTheme3 } from "@mui/material/styles";
+import { useTheme as useTheme4 } from "@mui/material/styles";
 
 // src/components/Charts/useChartColors.ts
-import { useTheme } from "@mui/material/styles";
+import { useTheme as useTheme2 } from "@mui/material/styles";
 function useChartColors(count) {
-  const theme = useTheme();
+  const theme = useTheme2();
   const chart = theme.palette.chart;
   const colors = chart.series.map((s) => s.fg);
   return colors.slice(0, Math.min(count, colors.length));
 }
 
 // src/components/Charts/CustomTooltip.tsx
-import { Box as Box4, Typography } from "@mui/material";
-import { useTheme as useTheme2 } from "@mui/material/styles";
-import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box6, Typography as Typography2 } from "@mui/material";
+import { useTheme as useTheme3 } from "@mui/material/styles";
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatDate(date) {
   if (!date) return "";
   const d = new Date(date);
@@ -1238,12 +1444,12 @@ function renderValue(val) {
 }
 function CustomTooltip(props) {
   const { series, axisValue, dataIndex } = props;
-  const theme = useTheme2();
+  const theme = useTheme3();
   if (dataIndex == null) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4(
-    Box4,
+  return /* @__PURE__ */ jsxs6(
+    Box6,
     {
       sx: {
         backgroundColor: theme.palette.common.white,
@@ -1258,8 +1464,8 @@ function CustomTooltip(props) {
         border: `1px solid ${theme.palette.divider}`
       },
       children: [
-        /* @__PURE__ */ jsx20(
-          Typography,
+        /* @__PURE__ */ jsx22(
+          Typography2,
           {
             variant: "body2",
             sx: {
@@ -1275,9 +1481,9 @@ function CustomTooltip(props) {
           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__ */ jsx20(Box4, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ jsx20(
-              Box4,
+          return /* @__PURE__ */ jsx22(Box6, { sx: { display: "flex", flexDirection: "column", gap: "6px" }, children: /* @__PURE__ */ jsxs6(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx22(
+              Box6,
               {
                 sx: {
                   width: 16,
@@ -1288,8 +1494,8 @@ function CustomTooltip(props) {
                 }
               }
             ),
-            /* @__PURE__ */ jsxs4(
-              Typography,
+            /* @__PURE__ */ jsxs6(
+              Typography2,
               {
                 variant: "body2",
                 sx: {
@@ -1299,8 +1505,8 @@ function CustomTooltip(props) {
                   gap: "6px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx20(
-                    Box4,
+                  /* @__PURE__ */ jsx22(
+                    Box6,
                     {
                       component: "span",
                       sx: {
@@ -1327,10 +1533,10 @@ function CustomTooltip(props) {
 }
 
 // src/components/Charts/LineChart.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function LineChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme3();
+  const theme = useTheme4();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
@@ -1341,7 +1547,7 @@ function LineChart({ series, colors, ...props }) {
       highlightScope: (_b2 = s.highlightScope) != null ? _b2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     MuiLineChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1414,11 +1620,11 @@ function LineChart({ series, colors, ...props }) {
 import {
   BarChart as MuiBarChart
 } from "@mui/x-charts/BarChart";
-import { useTheme as useTheme4 } from "@mui/material/styles";
-import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useTheme as useTheme5 } from "@mui/material/styles";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 function BarChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme4();
+  const theme = useTheme5();
   const chart = theme.palette.chart;
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const resolvedColors = colors != null ? colors : seriesColors;
@@ -1433,7 +1639,7 @@ function BarChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     MuiBarChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1493,10 +1699,10 @@ function BarChart({ series, colors, ...props }) {
         ...(_b = props.sx) != null ? _b : {}
       },
       ...props,
-      children: /* @__PURE__ */ jsx22("defs", { children: series == null ? void 0 : series.map((s, idx) => {
+      children: /* @__PURE__ */ jsx24("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__ */ jsxs5(
+        return /* @__PURE__ */ jsxs7(
           "pattern",
           {
             id: `striped-pattern-${idx}`,
@@ -1505,8 +1711,8 @@ function BarChart({ series, colors, ...props }) {
             height: "8",
             patternTransform: "rotate(45)",
             children: [
-              /* @__PURE__ */ jsx22("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
-              /* @__PURE__ */ jsx22("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
+              /* @__PURE__ */ jsx24("rect", { width: "8", height: "8", fill: theme.palette.background.paper }),
+              /* @__PURE__ */ jsx24("line", { x1: "0", y: "0", x2: "0", y2: "8", stroke: baseColor, strokeWidth: "4" })
             ]
           },
           `striped-${idx}`
@@ -1520,11 +1726,11 @@ function BarChart({ series, colors, ...props }) {
 import {
   PieChart as MuiPieChart
 } from "@mui/x-charts/PieChart";
-import { useTheme as useTheme5 } from "@mui/material/styles";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useTheme as useTheme6 } from "@mui/material/styles";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function PieChart({ series, colors, ...props }) {
   var _a, _b, _c, _d;
-  const theme = useTheme5();
+  const theme = useTheme6();
   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);
@@ -1535,7 +1741,7 @@ function PieChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     MuiPieChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1580,7 +1786,7 @@ function PieChart({ series, colors, ...props }) {
 import {
   ScatterChart as MuiScatterChart
 } from "@mui/x-charts/ScatterChart";
-import { useTheme as useTheme6 } from "@mui/material/styles";
+import { useTheme as useTheme7 } from "@mui/material/styles";
 
 // src/components/Charts/chartSx.ts
 function getForestChartSx(theme) {
@@ -1636,10 +1842,10 @@ var forestLegendSlotProps = {
 };
 
 // src/components/Charts/ScatterChart.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ScatterChart({ series, colors, ...props }) {
   var _a, _b;
-  const theme = useTheme6();
+  const theme = useTheme7();
   const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
   const modifiedSeries = series == null ? void 0 : series.map((s) => {
     var _a2;
@@ -1648,7 +1854,7 @@ function ScatterChart({ series, colors, ...props }) {
       highlightScope: (_a2 = s.highlightScope) != null ? _a2 : { highlighted: "item", faded: "global" }
     };
   });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     MuiScatterChart,
     {
       series: modifiedSeries != null ? modifiedSeries : [],
@@ -1668,12 +1874,12 @@ function ScatterChart({ series, colors, ...props }) {
 import {
   Gauge as MuiGauge
 } from "@mui/x-charts/Gauge";
-import { useTheme as useTheme7 } from "@mui/material/styles";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useTheme as useTheme8 } from "@mui/material/styles";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Gauge(props) {
   var _a;
-  const theme = useTheme7();
-  return /* @__PURE__ */ jsx25(
+  const theme = useTheme8();
+  return /* @__PURE__ */ jsx27(
     MuiGauge,
     {
       ...props,
@@ -1757,10 +1963,10 @@ import { getSeriesToDisplay } from "@mui/x-charts/ChartsLegend";
 import { getPieCoordinates } from "@mui/x-charts/PieChart";
 
 // src/index.ts
-import { useMediaQuery } from "@mui/material";
+import { useMediaQuery as useMediaQuery2 } from "@mui/material";
 import { useScrollTrigger } from "@mui/material";
 import { useFormControl } from "@mui/material";
-import { useTheme as useTheme8 } from "@mui/material";
+import { useTheme as useTheme9 } from "@mui/material";
 export {
   default47 as Accordion,
   default50 as AccordionActions,
@@ -1772,6 +1978,7 @@ export {
   AnimatedLine,
   default51 as AppBar,
   AppBarNavItem,
+  AppShell,
   AreaElement,
   AreaElementPath,
   AreaPlot,
@@ -1787,7 +1994,7 @@ export {
   BarPlot,
   default73 as BottomNavigation,
   default74 as BottomNavigationAction,
-  Box3 as Box,
+  Box5 as Box,
   default75 as Breadcrumbs,
   Button,
   default100 as ButtonBase,
@@ -1893,6 +2100,7 @@ export {
   MultiSelect,
   default103 as NoSsr,
   default19 as OutlinedInput,
+  Page,
   default80 as Pagination,
   default81 as PaginationItem,
   Paper,
@@ -2007,19 +2215,19 @@ export {
   useAxisTooltip,
   useChartColors,
   useChartId,
-  useColorScheme,
+  useColorScheme2 as useColorScheme,
   useDrawingArea,
   useFormControl,
   useGaugeState,
   useHighlighted,
   useItemHighlighted,
   useItemTooltip,
-  useMediaQuery,
+  useMediaQuery2 as useMediaQuery,
   useMouseTracker,
   useScrollTrigger,
   useSidebar,
   useSvgRef,
-  useTheme8 as useTheme,
+  useTheme9 as useTheme,
   useXAxis,
   useXColorScale,
   useXScale,