@matteoaliano/forest-ui 0.2.7 → 0.2.9

package/dist/index.js

@@ -23,8 +23,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 MuiListItemButton2 = require('@mui/material/ListItemButton');
+var ListItemIcon2 = require('@mui/material/ListItemIcon');
 var MuiListItemText = require('@mui/material/ListItemText');
 var MuiListItemAvatar = require('@mui/material/ListItemAvatar');
 var MuiListSubheader = require('@mui/material/ListSubheader');
@@ -61,6 +61,9 @@ 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -83,8 +86,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 MuiListItemButton2__default = /*#__PURE__*/_interopDefault(MuiListItemButton2);
+var ListItemIcon2__default = /*#__PURE__*/_interopDefault(ListItemIcon2);
 var MuiListItemText__default = /*#__PURE__*/_interopDefault(MuiListItemText);
 var MuiListItemAvatar__default = /*#__PURE__*/_interopDefault(MuiListItemAvatar);
 var MuiListSubheader__default = /*#__PURE__*/_interopDefault(MuiListSubheader);
@@ -120,6 +123,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 +219,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 +404,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 +551,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]
 };
@@ -526,7 +580,39 @@ var chartColors = {
   series2Fg: colors.brand[600],
   series2FgHover: colors.brand[700],
   series2Bg: colors.brand[100],
-  series2BgHover: colors.brand[200]
+  series2BgHover: colors.brand[200],
+  series3Fg: colors.teal[600],
+  series3FgHover: colors.teal[700],
+  series3Bg: colors.teal[100],
+  series3BgHover: colors.teal[200],
+  series4Fg: colors.orange[600],
+  series4FgHover: colors.orange[700],
+  series4Bg: colors.orange[100],
+  series4BgHover: colors.orange[200],
+  series5Fg: colors.purple[600],
+  series5FgHover: colors.purple[700],
+  series5Bg: colors.purple[100],
+  series5BgHover: colors.purple[200],
+  series6Fg: colors.pink[600],
+  series6FgHover: colors.pink[700],
+  series6Bg: colors.pink[100],
+  series6BgHover: colors.pink[200],
+  series7Fg: colors.fuchsia[600],
+  series7FgHover: colors.fuchsia[700],
+  series7Bg: colors.fuchsia[100],
+  series7BgHover: colors.fuchsia[200],
+  series8Fg: colors.orangeDark[600],
+  series8FgHover: colors.orangeDark[700],
+  series8Bg: colors.orangeDark[100],
+  series8BgHover: colors.orangeDark[200],
+  series9Fg: colors.green[600],
+  series9FgHover: colors.green[700],
+  series9Bg: colors.green[100],
+  series9BgHover: colors.green[200],
+  series10Fg: colors.indigo[600],
+  series10FgHover: colors.indigo[700],
+  series10Bg: colors.indigo[100],
+  series10BgHover: colors.indigo[200]
 };
 var alpha = {
   white: {
@@ -557,6 +643,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 +698,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 +707,8 @@ var palette = buildPalette({
   text,
   bg,
   fg,
-  border
+  border,
+  chartColors
 });
 
 // src/theme/typography.ts
@@ -716,7 +805,7 @@ var typography = buildTypography({
 function buildComponents(tokens) {
   const {
     colors: colors3,
-    radius: radius2,
+    radius: radius3,
     focusRings: focusRings3,
     shadows: tokenShadows,
     text: text3,
@@ -733,7 +822,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           fontWeight: 600,
           boxShadow: tokenShadows.xs,
           height: 32,
@@ -782,7 +871,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         grouped: {
           "&:not(:last-of-type)": {
@@ -814,8 +903,7 @@ function buildComponents(tokens) {
     // ─── TextField / Input ──────────────────────────────────────────
     MuiTextField: {
       defaultProps: {
-        variant: "outlined",
-        size: "small"
+        variant: "outlined"
       }
     },
     MuiInputBase: {
@@ -833,7 +921,7 @@ function buildComponents(tokens) {
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.xs,
           "&:hover .MuiOutlinedInput-notchedOutline": {
             borderColor: border3.brand
@@ -855,12 +943,7 @@ function buildComponents(tokens) {
           borderColor: border3.primary
         },
         input: {
-          padding: "10px 14px",
-          fontSize: 16,
-          lineHeight: "24px"
-        },
-        inputSizeSmall: {
-          padding: "8px 12px",
+          padding: "6px 12px",
           fontSize: 14,
           lineHeight: "20px"
         }
@@ -893,12 +976,7 @@ function buildComponents(tokens) {
           }
         },
         outlined: {
-          // Align label with custom OutlinedInput padding (10px 14px)
-          transform: "translate(14px, 10px) scale(1)",
-          "&.MuiInputLabel-sizeSmall": {
-            // Align label with custom inputSizeSmall padding (8px 12px)
-            transform: "translate(12px, 8px) scale(1)"
-          },
+          transform: "translate(12px, 6px) scale(1)",
           "&.MuiInputLabel-shrink": {
             transform: "translate(14px, -9px) scale(0.75)"
           }
@@ -921,20 +999,22 @@ function buildComponents(tokens) {
     // ─── Select ─────────────────────────────────────────────────────
     MuiSelect: {
       defaultProps: {
-        size: "small",
         MenuProps: {
-          autoFocus: false
+          autoFocus: false,
+          slotProps: {
+            backdrop: {
+              sx: { backgroundColor: "transparent" }
+            }
+          }
         }
       },
       styleOverrides: {
         select: {
-          display: "flex",
-          alignItems: "center",
           "&.MuiSelect-select": {
-            minHeight: "20px",
-            "&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
-              color: text3.placeholder
-            }
+            minHeight: "auto",
+            padding: "6px 12px",
+            fontSize: 14,
+            lineHeight: "20px"
           }
         },
         icon: {
@@ -945,7 +1025,7 @@ function buildComponents(tokens) {
     MuiMenuItem: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           padding: "6px 8px",
           gap: 4,
           "&:hover": {
@@ -958,15 +1038,24 @@ function buildComponents(tokens) {
     MuiAutocomplete: {
       styleOverrides: {
         paper: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.lg,
           border: `1px solid ${border3.secondary}`,
           marginTop: 4
         },
+        inputRoot: {
+          // Override Autocomplete's default padding so the input height stays 32px
+          padding: "0 12px",
+          "&.MuiOutlinedInput-root .MuiAutocomplete-input": {
+            padding: "6px 0",
+            fontSize: 14,
+            lineHeight: "20px"
+          }
+        },
         option: {
-          fontSize: 16,
-          lineHeight: "24px",
-          padding: "10px 14px",
+          fontSize: 14,
+          lineHeight: "20px",
+          padding: "6px 12px",
           "&.Mui-focused": {
             backgroundColor: bg3.primaryHover
           },
@@ -987,7 +1076,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           color: border3.primary,
-          borderRadius: radius2.xs,
+          borderRadius: radius3.xs,
           padding: 0,
           width: 20,
           height: 20,
@@ -1004,7 +1093,7 @@ function buildComponents(tokens) {
           "&.Mui-focusVisible": {
             outline: "none",
             boxShadow: focusRings3.brand,
-            borderRadius: radius2.xs
+            borderRadius: radius3.xs
           },
           "&.Mui-disabled": {
             color: border3.primary
@@ -1034,7 +1123,7 @@ function buildComponents(tokens) {
           "&.Mui-focusVisible": {
             outline: "none",
             boxShadow: focusRings3.brand,
-            borderRadius: radius2.full
+            borderRadius: radius3.full
           },
           "&.Mui-disabled": {
             color: border3.primary
@@ -1082,7 +1171,7 @@ function buildComponents(tokens) {
           boxShadow: "0px 1px 2px 0px #1018280d"
         },
         track: {
-          borderRadius: radius2.full,
+          borderRadius: radius3.full,
           backgroundColor: border3.secondary,
           opacity: 1
         }
@@ -1107,8 +1196,7 @@ function buildComponents(tokens) {
           "&.Mui-selected": {
             backgroundColor: bg3.brandPrimary,
             color: buttonColors3.secondaryColor.fg,
-            borderColor: border3.brand,
-            boxShadow: `inset 0 0 0 1px ${border3.brandSolid}`,
+            borderColor: border3.brandSolid,
             "&:hover": {
               backgroundColor: bg3.brandSecondary
             }
@@ -1122,7 +1210,7 @@ function buildComponents(tokens) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           overflow: "hidden"
         },
         grouped: {
@@ -1130,20 +1218,26 @@ function buildComponents(tokens) {
           "&:not(:first-of-type)": {
             marginLeft: -1
           },
-          "&.Mui-selected + &.Mui-selected": {
-            boxShadow: `inset -1px 0 0 0 ${border3.brandSolid}, inset 0 1px 0 0 ${border3.brandSolid}, inset 0 -1px 0 0 ${border3.brandSolid}`
-          },
           "&:first-of-type": {
-            borderTopLeftRadius: radius2.md,
-            borderBottomLeftRadius: radius2.md
+            borderTopLeftRadius: radius3.md,
+            borderBottomLeftRadius: radius3.md
           },
           "&:last-of-type": {
-            borderTopRightRadius: radius2.md,
-            borderBottomRightRadius: radius2.md
+            borderTopRightRadius: radius3.md,
+            borderBottomRightRadius: radius3.md
           }
         }
       }
     },
+    // ─── Drawer (used by Sidebar) ─────────────────────────────────
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: bg3.primary,
+          borderRight: `1px solid ${border3.secondary}`
+        }
+      }
+    },
     // ─── Card ───────────────────────────────────────────────────────
     MuiCard: {
       defaultProps: {
@@ -1151,7 +1245,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           border: `1px solid ${border3.secondary}`,
           backgroundColor: bg3.primary,
           boxShadow: tokenShadows.xs,
@@ -1200,7 +1294,7 @@ function buildComponents(tokens) {
           backgroundImage: "none"
         },
         rounded: {
-          borderRadius: radius2.lg
+          borderRadius: radius3.lg
         },
         elevation1: {
           boxShadow: tokenShadows.xs,
@@ -1241,7 +1335,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           border: `1px solid ${border3.secondary}`,
-          borderRadius: radius2.lg,
+          borderRadius: radius3.lg,
           "&:not(:last-child)": {
             marginBottom: 8
           },
@@ -1251,7 +1345,7 @@ function buildComponents(tokens) {
           "&.Mui-expanded": {
             margin: 0,
             marginBottom: 8,
-            borderRadius: radius2.lg
+            borderRadius: radius3.lg
           }
         }
       }
@@ -1314,7 +1408,7 @@ function buildComponents(tokens) {
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         label: {
           fontWeight: 500
@@ -1453,7 +1547,7 @@ function buildComponents(tokens) {
     MuiTableContainer: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           border: `1px solid ${border3.secondary}`,
           boxShadow: "none"
         }
@@ -1468,7 +1562,7 @@ function buildComponents(tokens) {
           lineHeight: "18px",
           minWidth: 20,
           height: 20,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         },
         colorPrimary: {
           backgroundColor: bg3.brandSolid
@@ -1485,7 +1579,7 @@ function buildComponents(tokens) {
         dot: {
           minWidth: 8,
           height: 8,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         }
       }
     },
@@ -1508,7 +1602,7 @@ function buildComponents(tokens) {
     MuiListItemButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.sm,
+          borderRadius: radius3.sm,
           padding: "8px 12px",
           "&:hover": {
             backgroundColor: bg3.primaryHover
@@ -1556,7 +1650,7 @@ function buildComponents(tokens) {
           lineHeight: "18px",
           fontWeight: 600,
           padding: "8px 12px",
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.lg
         },
         arrow: {
@@ -1571,7 +1665,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           fontSize: 14,
           lineHeight: "20px",
           padding: "12px 16px",
@@ -1637,7 +1731,7 @@ function buildComponents(tokens) {
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           boxShadow: tokenShadows.xl,
           padding: 0
         }
@@ -1676,17 +1770,17 @@ function buildComponents(tokens) {
     MuiLinearProgress: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.full,
+          borderRadius: radius3.full,
           height: 8,
           backgroundColor: border3.secondary
         },
         barColorPrimary: {
           backgroundColor: fg3.brandPrimary,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         },
         barColorSecondary: {
           backgroundColor: bg3.secondarySolid,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         }
       }
     },
@@ -1710,10 +1804,10 @@ function buildComponents(tokens) {
           backgroundColor: bg3.tertiary
         },
         rounded: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         circular: {
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         }
       }
     },
@@ -1723,7 +1817,7 @@ function buildComponents(tokens) {
         root: {
           backgroundColor: bg3.primarySolid,
           color: text3.white,
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           boxShadow: tokenShadows.lg,
           fontSize: 14,
           lineHeight: "20px",
@@ -1758,7 +1852,7 @@ function buildComponents(tokens) {
         styleOverrides: {
           root: {
             border: `1px solid ${border3.secondary}`,
-            borderRadius: radius2.xl,
+            borderRadius: radius3.xl,
             fontFamily: "inherit",
             "& .MuiDataGrid-withBorderColor": {
               borderColor: border3.secondary
@@ -1996,7 +2090,27 @@ 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,
+  xxs: 1,
+  xs: 2,
+  sm: 3,
+  md: 4,
+  lg: 5,
+  xl: 6,
+  "2xl": 8,
+  "3xl": 10,
+  "4xl": 12
 };
 var text2 = {
   primary: colors2.gray[900],
@@ -2212,7 +2326,39 @@ var chartColors2 = {
   series2Fg: red[600],
   series2FgHover: red[700],
   series2Bg: red[100],
-  series2BgHover: red[200]
+  series2BgHover: red[200],
+  series3Fg: colors2.teal[600],
+  series3FgHover: colors2.teal[700],
+  series3Bg: colors2.teal[100],
+  series3BgHover: colors2.teal[200],
+  series4Fg: colors2.orange[600],
+  series4FgHover: colors2.orange[700],
+  series4Bg: colors2.orange[100],
+  series4BgHover: colors2.orange[200],
+  series5Fg: colors2.purple[600],
+  series5FgHover: colors2.purple[700],
+  series5Bg: colors2.purple[100],
+  series5BgHover: colors2.purple[200],
+  series6Fg: colors2.pink[600],
+  series6FgHover: colors2.pink[700],
+  series6Bg: colors2.pink[100],
+  series6BgHover: colors2.pink[200],
+  series7Fg: colors2.fuchsia[600],
+  series7FgHover: colors2.fuchsia[700],
+  series7Bg: colors2.fuchsia[100],
+  series7BgHover: colors2.fuchsia[200],
+  series8Fg: colors2.orangeDark[600],
+  series8FgHover: colors2.orangeDark[700],
+  series8Bg: colors2.orangeDark[100],
+  series8BgHover: colors2.orangeDark[200],
+  series9Fg: colors2.green[600],
+  series9FgHover: colors2.green[700],
+  series9Bg: colors2.green[100],
+  series9BgHover: colors2.green[200],
+  series10Fg: colors2.indigo[600],
+  series10FgHover: colors2.indigo[700],
+  series10Bg: colors2.indigo[100],
+  series10BgHover: colors2.indigo[200]
 };
 var focusRings2 = {
   brand: "0px 0px 0px 4px #f040403d",
@@ -2232,7 +2378,7 @@ var alkemyPlusPreset = {
       tokens: {
         colors: colors2,
         spacing,
-        radius,
+        radius: radius2,
         shadows,
         focusRings: focusRings2,
         fontFamily: '"Aeonik", sans-serif',
@@ -2357,14 +2503,14 @@ function ToggleButtonGroup(props) {
 function Badge(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(MuiBadge__default.default, { ...props });
 }
-var Close_default = utils.createSvgIcon(/* @__PURE__ */ jsxRuntime.jsx("path", {
+var CloseOutlined_default = utils.createSvgIcon(/* @__PURE__ */ jsxRuntime.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"
-}), "Close");
+}), "CloseOutlined");
 function Chip(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiChip__default.default,
     {
-      deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(Close_default, {}),
+      deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseOutlined_default, {}),
       ...props
     }
   );
@@ -2379,10 +2525,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 });
@@ -2492,6 +2638,165 @@ 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
+  ] });
+}
 
 exports.Accordion = Accordion;
 exports.AccordionActions = AccordionActions;
@@ -2535,6 +2840,8 @@ exports.Paper = Paper;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
+exports.SidebarItem = SidebarItem;
+exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;
 exports.Snackbar = Snackbar;
 exports.Switch = Switch;
@@ -2583,6 +2890,7 @@ exports.spacing = spacing;
 exports.text = text;
 exports.toggleColors = toggleColors;
 exports.tokenShadows = shadows;
+exports.useSidebar = useSidebar;
 exports.widths = widths;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map