@matteoaliano/forest-ui 0.3.6 → 0.4.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { bg, navColors, text, forestTheme, getPreset, buildTheme, lineHeight, fontSize } from './chunk-G2ZXCZKP.mjs';
-export { alpha, avatarColors, base, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, container, display, error, fg, focusRings, fontFamily, fontSize, fontWeight, forestAgencyPreset, forestExternalPreset, forestInternalPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, info, lineHeight, navColors, radius, registerPreset, sliderColors, spacing, success, text, toggleColors, shadows as tokenShadows, warning, widths } from './chunk-G2ZXCZKP.mjs';
+import { misc, bg, navColors, text, forestTheme, getPreset, buildTheme, lineHeight, fontSize } from './chunk-IWYN6REP.mjs';
+export { alpha, avatarColors, base, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, container, display, error, fg, focusRings, fontFamily, fontFamilyMono, fontSize, fontWeight, forestAgencyPreset, forestExternalPreset, forestInternalPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, info, lineHeight, navColors, radius, registerPreset, sliderColors, spacing, success, text, toggleColors, shadows as tokenShadows, warning, widths } from './chunk-IWYN6REP.mjs';
 import React2, { forwardRef, createContext, useMemo, useState, useCallback, useContext } from 'react';
 import { ThemeProvider, useTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -139,8 +139,16 @@ function RadioGroup(props) {
 function Radio(props) {
   return /* @__PURE__ */ jsx(MuiRadio, { ...props });
 }
-function Select(props) {
-  return /* @__PURE__ */ jsx(MuiSelect, { ...props });
+function Select({ onClose, ...props }) {
+  const handleClose = (e) => {
+    onClose == null ? void 0 : onClose(e);
+    setTimeout(() => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(MuiSelect, { onClose: handleClose, ...props });
 }
 function MenuItem(props) {
   return /* @__PURE__ */ jsx(MuiMenuItem, { ...props });
@@ -367,11 +375,47 @@ function Badge(props) {
 var CloseOutlined_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"
 }), "CloseOutlined");
-function Chip({ deleteIcon = /* @__PURE__ */ jsx(CloseOutlined_default, {}), ...props }) {
+var customChipColors = {
+  teal: { bg: misc.teal[50], color: misc.teal[700], deleteIcon: misc.teal[400] },
+  orange: { bg: misc.orange[50], color: misc.orange[700], deleteIcon: misc.orange[400] },
+  purple: { bg: misc.purple[50], color: misc.purple[700], deleteIcon: misc.purple[400] },
+  pink: { bg: misc.pink[50], color: misc.pink[700], deleteIcon: misc.pink[400] },
+  fuchsia: { bg: misc.fuchsia[50], color: misc.fuchsia[700], deleteIcon: misc.fuchsia[400] },
+  orangeDark: { bg: misc.orangeDark[50], color: misc.orangeDark[700], deleteIcon: misc.orangeDark[400] },
+  green: { bg: misc.green[50], color: misc.green[700], deleteIcon: misc.green[400] },
+  indigo: { bg: misc.indigo[50], color: misc.indigo[700], deleteIcon: misc.indigo[400] },
+  rose: { bg: misc.rose[50], color: misc.rose[700], deleteIcon: misc.rose[400] },
+  blueLight: { bg: misc.blueLight[50], color: misc.blueLight[700], deleteIcon: misc.blueLight[400] }
+};
+function Chip({ color, deleteIcon = /* @__PURE__ */ jsx(CloseOutlined_default, {}), sx, ...props }) {
+  const custom = color && typeof color === "string" ? customChipColors[color] : void 0;
+  if (custom) {
+    return /* @__PURE__ */ jsx(
+      MuiChip,
+      {
+        deleteIcon,
+        ...props,
+        sx: [
+          {
+            "&.MuiChip-root": {
+              backgroundColor: custom.bg,
+              color: custom.color,
+              "& .MuiChip-deleteIcon": {
+                color: custom.deleteIcon
+              }
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     MuiChip,
     {
+      color,
       deleteIcon,
+      sx,
       ...props
     }
   );
@@ -445,8 +489,69 @@ function AppBar(props) {
 function Toolbar(props) {
   return /* @__PURE__ */ jsx(MuiToolbar, { ...props });
 }
-function Card(props) {
-  return /* @__PURE__ */ jsx(MuiCard, { ...props });
+function AppBarNavItem({
+  label,
+  icon,
+  selected = false,
+  href,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MuiButton,
+    {
+      variant: "text",
+      href,
+      startIcon: icon,
+      disableElevation: true,
+      ...props,
+      sx: [
+        {
+          height: 32,
+          padding: "6px 12px",
+          fontSize: 14,
+          fontWeight: 500,
+          color: "action.active",
+          textTransform: "none",
+          boxShadow: "none",
+          "&:hover": {
+            backgroundColor: "action.hover",
+            color: "text.primary",
+            boxShadow: "none"
+          },
+          "&:focus-visible": {
+            boxShadow: "none"
+          },
+          "& .MuiButton-startIcon": {
+            marginRight: 0.5
+          }
+        },
+        selected && {
+          color: "primary.light",
+          fontWeight: 600,
+          "&:hover": {
+            backgroundColor: "action.selected",
+            color: "primary.light",
+            boxShadow: "none"
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: label
+    }
+  );
+}
+function Card({ color = "primary", sx, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MuiCard,
+    {
+      ...props,
+      sx: [
+        color === "secondary" && { backgroundColor: "background.paper" },
+        ...Array.isArray(sx) ? sx : [sx]
+      ]
+    }
+  );
 }
 function CardContent(props) {
   return /* @__PURE__ */ jsx(MuiCardContent, { ...props });
@@ -737,10 +842,7 @@ function CustomTooltip(props) {
         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.series[0].fg}`
+        border: `1px solid ${theme.palette.divider}`
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -750,7 +852,8 @@ function CustomTooltip(props) {
             sx: {
               fontWeight: 600,
               color: theme.palette.text.primary,
-              marginBottom: "4px"
+              paddingBottom: "12px",
+              borderBottom: `1px solid ${theme.palette.divider}`
             },
             children: formatDate(axisValue)
           }
@@ -1043,6 +1146,6 @@ function PieChart({ series, colors, ...props }) {
   );
 }
 
-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, IconButton2 as IconButton, Input, LineChart, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Logo, 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 };
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, AppBarNavItem, 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, IconButton2 as IconButton, Input, LineChart, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Logo, 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