@matteoaliano/forest-ui 0.2.8 → 0.2.9

package/dist/{index-C7JP9vAZ.d.mts → index-BxpOMmf6.d.mts}

@@ -95,6 +95,54 @@ declare const colors: {
         readonly 900: "#194185";
         readonly 950: "#102a56";
     };
+    readonly teal: {
+        readonly 100: "#ccfbef";
+        readonly 200: "#99f6e0";
+        readonly 600: "#0e9384";
+        readonly 700: "#107569";
+    };
+    readonly orange: {
+        readonly 100: "#fdead7";
+        readonly 200: "#f9dbaf";
+        readonly 600: "#e04f16";
+        readonly 700: "#b93815";
+    };
+    readonly purple: {
+        readonly 100: "#ebe9fe";
+        readonly 200: "#d9d6fe";
+        readonly 600: "#6938ef";
+        readonly 700: "#5925dc";
+    };
+    readonly pink: {
+        readonly 100: "#fce7f6";
+        readonly 200: "#fcceee";
+        readonly 600: "#dd2590";
+        readonly 700: "#c11574";
+    };
+    readonly fuchsia: {
+        readonly 100: "#fbe8ff";
+        readonly 200: "#f6d0fe";
+        readonly 600: "#ba24d5";
+        readonly 700: "#9f1ab1";
+    };
+    readonly orangeDark: {
+        readonly 100: "#ffe6d5";
+        readonly 200: "#ffd6ae";
+        readonly 600: "#e62e05";
+        readonly 700: "#bc1b06";
+    };
+    readonly green: {
+        readonly 100: "#d3f8df";
+        readonly 200: "#aaf0c4";
+        readonly 600: "#099250";
+        readonly 700: "#087443";
+    };
+    readonly indigo: {
+        readonly 100: "#e0eaff";
+        readonly 200: "#c7d7fe";
+        readonly 600: "#444ce7";
+        readonly 700: "#3538cd";
+    };
 };
 declare const spacing: {
     readonly none: 0;
@@ -253,7 +301,7 @@ declare const bg: {
     readonly secondarySolid: "#475467";
     readonly tertiary: "#f2f4f7";
     readonly quaternary: "#eaecf0";
-    readonly active: "#f9fafb";
+    readonly active: "#eaecf0";
     readonly disabled: "#f2f4f7";
     readonly disabledSubtle: "#f9fafb";
     readonly overlay: "#0c111d";
@@ -400,7 +448,7 @@ declare const iconColors: {
 };
 declare const navColors: {
     readonly itemIconFg: "#667085";
-    readonly itemIconFgActive: "#667085";
+    readonly itemIconFgActive: "#344054";
     readonly itemButtonIconFg: "#667085";
     readonly itemButtonIconFgActive: "#344054";
 };
@@ -430,6 +478,38 @@ declare const chartColors: {
     readonly series2FgHover: "#6941c6";
     readonly series2Bg: "#f4ebff";
     readonly series2BgHover: "#e9d7fe";
+    readonly series3Fg: "#0e9384";
+    readonly series3FgHover: "#107569";
+    readonly series3Bg: "#ccfbef";
+    readonly series3BgHover: "#99f6e0";
+    readonly series4Fg: "#e04f16";
+    readonly series4FgHover: "#b93815";
+    readonly series4Bg: "#fdead7";
+    readonly series4BgHover: "#f9dbaf";
+    readonly series5Fg: "#6938ef";
+    readonly series5FgHover: "#5925dc";
+    readonly series5Bg: "#ebe9fe";
+    readonly series5BgHover: "#d9d6fe";
+    readonly series6Fg: "#dd2590";
+    readonly series6FgHover: "#c11574";
+    readonly series6Bg: "#fce7f6";
+    readonly series6BgHover: "#fcceee";
+    readonly series7Fg: "#ba24d5";
+    readonly series7FgHover: "#9f1ab1";
+    readonly series7Bg: "#fbe8ff";
+    readonly series7BgHover: "#f6d0fe";
+    readonly series8Fg: "#e62e05";
+    readonly series8FgHover: "#bc1b06";
+    readonly series8Bg: "#ffe6d5";
+    readonly series8BgHover: "#ffd6ae";
+    readonly series9Fg: "#099250";
+    readonly series9FgHover: "#087443";
+    readonly series9Bg: "#d3f8df";
+    readonly series9BgHover: "#aaf0c4";
+    readonly series10Fg: "#444ce7";
+    readonly series10FgHover: "#3538cd";
+    readonly series10Bg: "#e0eaff";
+    readonly series10BgHover: "#c7d7fe";
 };
 declare const alpha: {
     readonly white: {
@@ -505,6 +585,14 @@ interface ThemePreset {
     variants: Record<string, PresetVariantConfig>;
 }
 
+declare module "@mui/material/styles" {
+    interface Palette {
+        chart: DesignTokens["chartColors"];
+    }
+    interface PaletteOptions {
+        chart?: DesignTokens["chartColors"];
+    }
+}
 declare const palette: PaletteOptions;
 
 declare const typography: TypographyVariantsOptions;

package/dist/{index-C7JP9vAZ.d.ts → index-BxpOMmf6.d.ts}

@@ -95,6 +95,54 @@ declare const colors: {
         readonly 900: "#194185";
         readonly 950: "#102a56";
     };
+    readonly teal: {
+        readonly 100: "#ccfbef";
+        readonly 200: "#99f6e0";
+        readonly 600: "#0e9384";
+        readonly 700: "#107569";
+    };
+    readonly orange: {
+        readonly 100: "#fdead7";
+        readonly 200: "#f9dbaf";
+        readonly 600: "#e04f16";
+        readonly 700: "#b93815";
+    };
+    readonly purple: {
+        readonly 100: "#ebe9fe";
+        readonly 200: "#d9d6fe";
+        readonly 600: "#6938ef";
+        readonly 700: "#5925dc";
+    };
+    readonly pink: {
+        readonly 100: "#fce7f6";
+        readonly 200: "#fcceee";
+        readonly 600: "#dd2590";
+        readonly 700: "#c11574";
+    };
+    readonly fuchsia: {
+        readonly 100: "#fbe8ff";
+        readonly 200: "#f6d0fe";
+        readonly 600: "#ba24d5";
+        readonly 700: "#9f1ab1";
+    };
+    readonly orangeDark: {
+        readonly 100: "#ffe6d5";
+        readonly 200: "#ffd6ae";
+        readonly 600: "#e62e05";
+        readonly 700: "#bc1b06";
+    };
+    readonly green: {
+        readonly 100: "#d3f8df";
+        readonly 200: "#aaf0c4";
+        readonly 600: "#099250";
+        readonly 700: "#087443";
+    };
+    readonly indigo: {
+        readonly 100: "#e0eaff";
+        readonly 200: "#c7d7fe";
+        readonly 600: "#444ce7";
+        readonly 700: "#3538cd";
+    };
 };
 declare const spacing: {
     readonly none: 0;
@@ -253,7 +301,7 @@ declare const bg: {
     readonly secondarySolid: "#475467";
     readonly tertiary: "#f2f4f7";
     readonly quaternary: "#eaecf0";
-    readonly active: "#f9fafb";
+    readonly active: "#eaecf0";
     readonly disabled: "#f2f4f7";
     readonly disabledSubtle: "#f9fafb";
     readonly overlay: "#0c111d";
@@ -400,7 +448,7 @@ declare const iconColors: {
 };
 declare const navColors: {
     readonly itemIconFg: "#667085";
-    readonly itemIconFgActive: "#667085";
+    readonly itemIconFgActive: "#344054";
     readonly itemButtonIconFg: "#667085";
     readonly itemButtonIconFgActive: "#344054";
 };
@@ -430,6 +478,38 @@ declare const chartColors: {
     readonly series2FgHover: "#6941c6";
     readonly series2Bg: "#f4ebff";
     readonly series2BgHover: "#e9d7fe";
+    readonly series3Fg: "#0e9384";
+    readonly series3FgHover: "#107569";
+    readonly series3Bg: "#ccfbef";
+    readonly series3BgHover: "#99f6e0";
+    readonly series4Fg: "#e04f16";
+    readonly series4FgHover: "#b93815";
+    readonly series4Bg: "#fdead7";
+    readonly series4BgHover: "#f9dbaf";
+    readonly series5Fg: "#6938ef";
+    readonly series5FgHover: "#5925dc";
+    readonly series5Bg: "#ebe9fe";
+    readonly series5BgHover: "#d9d6fe";
+    readonly series6Fg: "#dd2590";
+    readonly series6FgHover: "#c11574";
+    readonly series6Bg: "#fce7f6";
+    readonly series6BgHover: "#fcceee";
+    readonly series7Fg: "#ba24d5";
+    readonly series7FgHover: "#9f1ab1";
+    readonly series7Bg: "#fbe8ff";
+    readonly series7BgHover: "#f6d0fe";
+    readonly series8Fg: "#e62e05";
+    readonly series8FgHover: "#bc1b06";
+    readonly series8Bg: "#ffe6d5";
+    readonly series8BgHover: "#ffd6ae";
+    readonly series9Fg: "#099250";
+    readonly series9FgHover: "#087443";
+    readonly series9Bg: "#d3f8df";
+    readonly series9BgHover: "#aaf0c4";
+    readonly series10Fg: "#444ce7";
+    readonly series10FgHover: "#3538cd";
+    readonly series10Bg: "#e0eaff";
+    readonly series10BgHover: "#c7d7fe";
 };
 declare const alpha: {
     readonly white: {
@@ -505,6 +585,14 @@ interface ThemePreset {
     variants: Record<string, PresetVariantConfig>;
 }
 
+declare module "@mui/material/styles" {
+    interface Palette {
+        chart: DesignTokens["chartColors"];
+    }
+    interface PaletteOptions {
+        chart?: DesignTokens["chartColors"];
+    }
+}
 declare const palette: PaletteOptions;
 
 declare const typography: TypographyVariantsOptions;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Theme } from '@mui/material/styles';
-export { D as DesignTokens, P as PresetVariantConfig, T as ThemePreset, a as alkemyPlusPreset, b as alpha, c as avatarColors, d as bg, e as border, f as breadcrumbColors, g as buildTheme, h as buildThemeOptions, i as buttonColors, j as chartColors, k as colors, l as container, m as display, n as fg, o as focusRings, p as fontFamily, q as fontSize, r as fontWeight, s as forestPreset, t as forestTheme, u as forestThemeOptions, v as getAvailablePresets, w as getPreset, x as iconColors, y as lineHeight, z as navColors, A as radius, B as registerPreset, C as sliderColors, E as spacing, F as text, G as toggleColors, H as tokenShadows, I as widths } from './index-C7JP9vAZ.mjs';
+export { D as DesignTokens, P as PresetVariantConfig, T as ThemePreset, a as alkemyPlusPreset, b as alpha, c as avatarColors, d as bg, e as border, f as breadcrumbColors, g as buildTheme, h as buildThemeOptions, i as buttonColors, j as chartColors, k as colors, l as container, m as display, n as fg, o as focusRings, p as fontFamily, q as fontSize, r as fontWeight, s as forestPreset, t as forestTheme, u as forestThemeOptions, v as getAvailablePresets, w as getPreset, x as iconColors, y as lineHeight, z as navColors, A as radius, B as registerPreset, C as sliderColors, E as spacing, F as text, G as toggleColors, H as tokenShadows, I as widths } from './index-BxpOMmf6.mjs';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 export { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
@@ -112,6 +112,8 @@ import { SkeletonProps } from '@mui/material/Skeleton';
 export { SkeletonProps } from '@mui/material/Skeleton';
 import { SnackbarProps } from '@mui/material/Snackbar';
 export { SnackbarProps } from '@mui/material/Snackbar';
+import React$1 from 'react';
+import { DrawerProps } from '@mui/material/Drawer';
 import '@mui/material';
 
 interface ForestProviderProps {
@@ -208,4 +210,44 @@ declare function Skeleton(props: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 declare function Snackbar(props: SnackbarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, Button, ButtonGroup, type ButtonProps, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, type ForestProviderProps, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, Paper, Radio, RadioGroup, Select, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography };
+interface SidebarContextValue {
+    open: boolean;
+    collapsedWidth: number;
+    expandedWidth: number;
+}
+declare function useSidebar(): SidebarContextValue;
+interface SidebarNavProps extends Omit<DrawerProps, "open" | "variant" | "onClose"> {
+    /** Whether the sidebar is expanded */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Width when expanded (default: 240) */
+    expandedWidth?: number;
+    /** Width when collapsed — icon-only (default: 64) */
+    collapsedWidth?: number;
+    /** Expand behavior:
+     *  - "permanent": click to toggle, stays open/closed
+     *  - "hover": collapsed by default, expands on mouse enter, collapses on mouse leave
+     */
+    behavior?: "permanent" | "hover";
+    /** Whether to show the edge toggle button (default: true for "permanent", false for "hover") */
+    showToggle?: boolean;
+    /** Content rendered inside the sidebar */
+    children: React$1.ReactNode;
+    /** Optional header slot — rendered above children */
+    header?: React$1.ReactNode;
+    /** Optional footer slot — rendered at bottom */
+    footer?: React$1.ReactNode;
+}
+declare function SidebarNav({ open, onOpenChange, expandedWidth, collapsedWidth, behavior, showToggle, children, header, footer, sx, ...rest }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps extends Omit<ListItemButtonProps, "children"> {
+    /** Icon element (required — visible in both expanded and collapsed states) */
+    icon: React$1.ReactNode;
+    /** Label text */
+    label: string;
+    /** Optional content rendered on the right side when expanded (badge, count, etc.) */
+    endAdornment?: React$1.ReactNode;
+}
+declare function SidebarItem({ icon, label, endAdornment, sx, ...rest }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, Button, ButtonGroup, type ButtonProps, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, type ForestProviderProps, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, Paper, Radio, RadioGroup, Select, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, useSidebar };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Theme } from '@mui/material/styles';
-export { D as DesignTokens, P as PresetVariantConfig, T as ThemePreset, a as alkemyPlusPreset, b as alpha, c as avatarColors, d as bg, e as border, f as breadcrumbColors, g as buildTheme, h as buildThemeOptions, i as buttonColors, j as chartColors, k as colors, l as container, m as display, n as fg, o as focusRings, p as fontFamily, q as fontSize, r as fontWeight, s as forestPreset, t as forestTheme, u as forestThemeOptions, v as getAvailablePresets, w as getPreset, x as iconColors, y as lineHeight, z as navColors, A as radius, B as registerPreset, C as sliderColors, E as spacing, F as text, G as toggleColors, H as tokenShadows, I as widths } from './index-C7JP9vAZ.js';
+export { D as DesignTokens, P as PresetVariantConfig, T as ThemePreset, a as alkemyPlusPreset, b as alpha, c as avatarColors, d as bg, e as border, f as breadcrumbColors, g as buildTheme, h as buildThemeOptions, i as buttonColors, j as chartColors, k as colors, l as container, m as display, n as fg, o as focusRings, p as fontFamily, q as fontSize, r as fontWeight, s as forestPreset, t as forestTheme, u as forestThemeOptions, v as getAvailablePresets, w as getPreset, x as iconColors, y as lineHeight, z as navColors, A as radius, B as registerPreset, C as sliderColors, E as spacing, F as text, G as toggleColors, H as tokenShadows, I as widths } from './index-BxpOMmf6.js';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 export { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
@@ -112,6 +112,8 @@ import { SkeletonProps } from '@mui/material/Skeleton';
 export { SkeletonProps } from '@mui/material/Skeleton';
 import { SnackbarProps } from '@mui/material/Snackbar';
 export { SnackbarProps } from '@mui/material/Snackbar';
+import React$1 from 'react';
+import { DrawerProps } from '@mui/material/Drawer';
 import '@mui/material';
 
 interface ForestProviderProps {
@@ -208,4 +210,44 @@ declare function Skeleton(props: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 declare function Snackbar(props: SnackbarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, Button, ButtonGroup, type ButtonProps, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, type ForestProviderProps, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, Paper, Radio, RadioGroup, Select, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography };
+interface SidebarContextValue {
+    open: boolean;
+    collapsedWidth: number;
+    expandedWidth: number;
+}
+declare function useSidebar(): SidebarContextValue;
+interface SidebarNavProps extends Omit<DrawerProps, "open" | "variant" | "onClose"> {
+    /** Whether the sidebar is expanded */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Width when expanded (default: 240) */
+    expandedWidth?: number;
+    /** Width when collapsed — icon-only (default: 64) */
+    collapsedWidth?: number;
+    /** Expand behavior:
+     *  - "permanent": click to toggle, stays open/closed
+     *  - "hover": collapsed by default, expands on mouse enter, collapses on mouse leave
+     */
+    behavior?: "permanent" | "hover";
+    /** Whether to show the edge toggle button (default: true for "permanent", false for "hover") */
+    showToggle?: boolean;
+    /** Content rendered inside the sidebar */
+    children: React$1.ReactNode;
+    /** Optional header slot — rendered above children */
+    header?: React$1.ReactNode;
+    /** Optional footer slot — rendered at bottom */
+    footer?: React$1.ReactNode;
+}
+declare function SidebarNav({ open, onOpenChange, expandedWidth, collapsedWidth, behavior, showToggle, children, header, footer, sx, ...rest }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps extends Omit<ListItemButtonProps, "children"> {
+    /** Icon element (required — visible in both expanded and collapsed states) */
+    icon: React$1.ReactNode;
+    /** Label text */
+    label: string;
+    /** Optional content rendered on the right side when expanded (badge, count, etc.) */
+    endAdornment?: React$1.ReactNode;
+}
+declare function SidebarItem({ icon, label, endAdornment, sx, ...rest }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Backdrop, Badge, Button, ButtonGroup, type ButtonProps, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, CircularProgress, DataGrid, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Fab, ForestProvider, type ForestProviderProps, LinearProgress, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, ListSubheader, MenuItem, Paper, Radio, RadioGroup, Select, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, Snackbar, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, useSidebar };