@matteoaliano/forest-ui 0.8.3 → 0.8.5

package/skills/forest-alkemy-plus/references/components.md

@@ -1,202 +1,202 @@
-# Forest UI — Component Reference
-
-> Full API reference for all components exported by `@matteoaliano/forest-ui`.
-
-## Import Pattern
-
-```tsx
-// CORRECT — import from forest-ui
-import { Button, TextField, Alert } from "@matteoaliano/forest-ui";
-
-// WRONG — never import from @mui/material
-import Button from "@mui/material/Button";
-```
-
-> **All MUI components are re-exported.** Never import from `@mui/material` — always use `@matteoaliano/forest-ui`. The only exception is `@mui/icons-material` for icons.
-
-## Layout
-
-| Component | Import | Key Props |
-|-----------|--------|-----------|
-| `Box` | `import { Box } from "@matteoaliano/forest-ui"` | `sx`, `component`, all HTML attributes |
-| `Stack` | `import { Stack } from "@matteoaliano/forest-ui"` | `direction`, `spacing`, `divider`, `alignItems`, `justifyContent` |
-| `Grid` | `import { Grid } from "@matteoaliano/forest-ui"` | `container`, `size`, `spacing`, `offset`, `columns`, `direction` |
-| `Container` | `import { Container } from "@matteoaliano/forest-ui"` | `maxWidth: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| false`, `fixed`, `disableGutters` |
-
-## Form Helpers
-
-| Component | Import | Key Props |
-|-----------|--------|-----------|
-| `FormControl` | `import { FormControl } from "@matteoaliano/forest-ui"` | `variant`, `fullWidth`, `error`, `disabled`, `required`, `size` |
-| `FormControlLabel` | `import { FormControlLabel } from "@matteoaliano/forest-ui"` | `control` (required), `label`, `labelPlacement`, `disabled` |
-| `FormGroup` | `import { FormGroup } from "@matteoaliano/forest-ui"` | `row`, `children` |
-| `FormHelperText` | `import { FormHelperText } from "@matteoaliano/forest-ui"` | `error`, `disabled`, `margin` |
-| `FormLabel` | `import { FormLabel } from "@matteoaliano/forest-ui"` | `error`, `focused`, `required`, `disabled`, `color` |
-| `InputAdornment` | `import { InputAdornment } from "@matteoaliano/forest-ui"` | `position: "start" \| "end"`, `variant`, `disablePointerEvents` |
-| `InputBase` | `import { InputBase } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `placeholder`, `multiline`, `rows`, `startAdornment`, `endAdornment` |
-| `InputLabel` | `import { InputLabel } from "@matteoaliano/forest-ui"` | `shrink`, `variant`, `error`, `required`, `disabled` |
-| `OutlinedInput` | `import { OutlinedInput } from "@matteoaliano/forest-ui"` | `label`, `notched`, all InputBase props |
-| `FilledInput` | `import { FilledInput } from "@matteoaliano/forest-ui"` | All InputBase props |
-
-## Inputs
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Button` | `import { Button } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `color`, `size: "small" \| "medium" \| "large"`, `disabled`, `startIcon`, `endIcon`, `fullWidth`, `href` | `variant="contained"` |
-| `ButtonGroup` | `import { ButtonGroup } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `size: "small" \| "medium" \| "large"`, `orientation: "horizontal" \| "vertical"`, `color`, `disabled`, `fullWidth` | `variant="contained"` |
-| `TextField` | `import { TextField } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `label`, `error`, `helperText`, `fullWidth`, `multiline`, `rows`, `type`, `placeholder`, `required`, `disabled` | — |
-| `Select` + `MenuItem` | `import { Select, MenuItem } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `multiple`, `displayEmpty`, `label`, `labelId`, `renderValue`, `native`, `error`, `disabled` | — |
-| `MultiSelect` | `import { MultiSelect } from "@matteoaliano/forest-ui"` | `options: { label, value }[]`, `value: string[]`, `onChange: (values) => void`, `selectAll: boolean`, `selectAllLabel: string`, `label` + all SelectProps | `selectAll={true}`, `selectAllLabel="Select All"` |
-| `Checkbox` | `import { Checkbox } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `indeterminate`, `disabled` | — |
-| `RadioGroup` + `Radio` | `import { RadioGroup, Radio } from "@matteoaliano/forest-ui"` | `row`, `value`, `onChange`; Radio: `color`, `size: "small" \| "medium" \| "large"`, `disabled` | — |
-| `Switch` | `import { Switch } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `disabled` | — |
-| `ToggleButton` + `ToggleButtonGroup` | `import { ToggleButton, ToggleButtonGroup } from "@matteoaliano/forest-ui"` | `value`, `exclusive`, `onChange`, `orientation: "horizontal" \| "vertical"`, `size: "small" \| "medium" \| "large"`, `color`, `fullWidth` | — |
-| `Fab` | `import { Fab } from "@matteoaliano/forest-ui"` | `variant: "circular" \| "extended"`, `size: "small" \| "medium" \| "large"`, `color`, `disabled`, `href` | `color="primary"` |
-| `IconButton` | `import { IconButton } from "@matteoaliano/forest-ui"` | `color: "inherit" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "default"`, `size: "small" \| "medium" \| "large"`, `disabled`, `disableRipple` | — |
-| `Autocomplete` | `import { Autocomplete } from "@matteoaliano/forest-ui"` | `options`, `renderInput` (required), `multiple`, `freeSolo`, `disableClearable`, `loading`, `groupBy`, `limitTags`, `filterOptions` | — |
-| `Search` | `import { Search } from "@matteoaliano/forest-ui"` | `onClear`, `placeholder`, all TextField props (except `variant`) | `variant="outlined"`, `placeholder="Search..."`, built-in search icon and clear button |
-| `Input` | `import { Input } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `placeholder`, `multiline`, `rows`, `startAdornment`, `endAdornment`, `disabled`, `error` — all InputBase props | — |
-| `DatePicker` | `import { DatePicker } from "@matteoaliano/forest-ui"` | All MUI X DatePicker props (`value`, `onChange`, `label`, `format`, `minDate`, `maxDate`, `disabled`, `readOnly`) | Wraps with `LocalizationProvider` + `AdapterDayjs` automatically |
-
-## Data Display
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Badge` | `import { Badge } from "@matteoaliano/forest-ui"` | `variant: "standard" \| "dot"`, `color`, `badgeContent`, `max`, `invisible`, `showZero`, `overlap: "rectangular" \| "circular"`, `anchorOrigin` | — |
-| `Chip` | `import { Chip } from "@matteoaliano/forest-ui"` | `variant: "filled" \| "outlined"`, `color`, `size: "small" \| "medium"`, `label`, `onDelete`, `clickable`, `avatar`, `icon` | `deleteIcon={<CloseOutlined />}` |
-| `Divider` | `import { Divider } from "@matteoaliano/forest-ui"` | `orientation: "horizontal" \| "vertical"`, `variant: "fullWidth" \| "inset" \| "middle"`, `textAlign`, `flexItem` | — |
-| `Typography` | `import { Typography } from "@matteoaliano/forest-ui"` | `variant: "h1"-"h6" \| "subtitle1" \| "subtitle2" \| "body1" \| "body2" \| "caption" \| "overline" \| "button"`, `align`, `gutterBottom`, `noWrap` | — |
-| `Tooltip` | `import { Tooltip } from "@matteoaliano/forest-ui"` | `title` (required), `placement` (12 positions), `arrow`, `followCursor`, `enterDelay`, `leaveDelay` | `arrow={true}` |
-| `Avatar` | `import { Avatar } from "@matteoaliano/forest-ui"` | `src`, `alt`, `variant: "circular" \| "rounded" \| "square"`, `sizes`, `children` (fallback) |
-| `AvatarGroup` | `import { AvatarGroup } from "@matteoaliano/forest-ui"` | `max`, `total`, `spacing`, `variant` |
-| `ImageList` | `import { ImageList } from "@matteoaliano/forest-ui"` | `variant: "masonry" \| "quilted" \| "standard" \| "woven"`, `cols`, `gap`, `rowHeight` |
-| `ImageListItem` | `import { ImageListItem } from "@matteoaliano/forest-ui"` | `cols`, `rows` |
-| `ImageListItemBar` | `import { ImageListItemBar } from "@matteoaliano/forest-ui"` | `title`, `subtitle`, `position`, `actionIcon` |
-| `Logo` | `import { Logo } from "@matteoaliano/forest-ui"` | `product: "wsuite" \| "studio" \| "feedati" \| "ai-hub"`, `variant: "logo" \| "logomark"`, `color: "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`, `color="positive"`. Studio and AI Hub `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. WSuite/FeeDati only define `positive`; other colors fall back. `negative-payoff` falls back to `negative` for `logomark` (no payoff to invert). |
-| `Rating` | `import { Rating } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `precision`, `max`, `size`, `readOnly`, `disabled` |
-| `Table` family | `import { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from "@matteoaliano/forest-ui"` | Table: `size: "small" \| "medium"`, `stickyHeader`; TableCell: `align`, `padding`, `sortDirection`, `variant`; TableRow: `hover`, `selected` | — |
-| `DataGrid` | `import { DataGrid, type GridColDef, type GridRenderCellParams, type GridRowSelectionModel } from "@matteoaliano/forest-ui"` | `rows`, `columns`, `paginationModel`, `sortModel`, `filterModel`, `checkboxSelection`, `loading`, `density`. Types: `GridColDef`, `GridRowsProp`, `GridRowParams`, `GridCellParams`, `GridRenderCellParams`, `GridRowSelectionModel`, `GridSortModel`, `GridFilterModel`, `GridPaginationModel` | — |
-| `List` family | `import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListItemAvatar, ListSubheader } from "@matteoaliano/forest-ui"` | `dense`, `disablePadding`; ListItemButton: `selected`, `disabled`; ListItemText: `primary`, `secondary` | — |
-| `TableFooter` | `import { TableFooter } from "@matteoaliano/forest-ui"` | `component`, `children` |
-| `TablePagination` | `import { TablePagination } from "@matteoaliano/forest-ui"` | `count`, `page`, `rowsPerPage`, `onPageChange`, `onRowsPerPageChange` |
-| `TableSortLabel` | `import { TableSortLabel } from "@matteoaliano/forest-ui"` | `active`, `direction: "asc" \| "desc"`, `onClick` |
-| `ListItemSecondaryAction` | `import { ListItemSecondaryAction } from "@matteoaliano/forest-ui"` | `children` |
-| `SnackbarContent` | `import { SnackbarContent } from "@matteoaliano/forest-ui"` | `message`, `action` |
-
-## Surfaces
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Accordion` family | `import { Accordion, AccordionSummary, AccordionDetails, AccordionActions } from "@matteoaliano/forest-ui"` | `expanded`, `defaultExpanded`, `onChange`, `disabled`, `disableGutters`, `square` | — |
-| `AppBar` + `Toolbar` | `import { AppBar, Toolbar } from "@matteoaliano/forest-ui"` | `position`, `color`, `elevation`; Toolbar: `variant: "dense" \| "regular"` | — |
-| `AppBarNavItem` | `import { AppBarNavItem } from "@matteoaliano/forest-ui"` | `label` (required), `icon`, `selected`, `href`, `sx` — navigation button for AppBar | — |
-| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
-| `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
-| `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
-| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
-| `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
-
-## Feedback
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Alert` + `AlertTitle` | `import { Alert, AlertTitle } from "@matteoaliano/forest-ui"` | `severity: "success" \| "info" \| "warning" \| "error"`, `variant: "filled" \| "outlined" \| "standard"`, `color`, `icon`, `action`, `onClose` | — |
-| `Dialog` family | `import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText } from "@matteoaliano/forest-ui"` | `open` (required), `onClose`, `fullWidth`, `maxWidth`, `fullScreen`, `scroll: "paper" \| "body"` | — |
-| `Backdrop` | `import { Backdrop } from "@matteoaliano/forest-ui"` | `open` (required), `invisible`, `onClick` | — |
-| `LinearProgress` | `import { LinearProgress } from "@matteoaliano/forest-ui"` | `variant: "indeterminate" \| "determinate" \| "buffer" \| "query"`, `value` (0-100), `color` | — |
-| `CircularProgress` | `import { CircularProgress } from "@matteoaliano/forest-ui"` | `variant: "indeterminate" \| "determinate"`, `value` (0-100), `color`, `size`, `thickness` | — |
-| `Skeleton` | `import { Skeleton } from "@matteoaliano/forest-ui"` | `variant: "text" \| "circular" \| "rectangular" \| "rounded"`, `animation: "pulse" \| "wave" \| false`, `width`, `height` | — |
-| `Modal` | `import { Modal } from "@matteoaliano/forest-ui"` | `open` (required), `onClose`, `children`, `keepMounted`, `disableAutoFocus`, `disableEscapeKeyDown` | — |
-| `Popover` | `import { Popover } from "@matteoaliano/forest-ui"` | `open` (required), `anchorEl`, `onClose`, `anchorOrigin`, `transformOrigin`, `elevation` | — |
-| `Snackbar` | `import { Snackbar } from "@matteoaliano/forest-ui"` | `open`, `message`, `autoHideDuration`, `onClose`, `action`, `anchorOrigin` | — |
-| `Slider` | `import { Slider } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `min`, `max`, `step`, `marks`, `valueLabelDisplay`, `orientation`, `size` | — |
-
-## Navigation
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `Breadcrumbs` | `import { Breadcrumbs } from "@matteoaliano/forest-ui"` | `separator`, `maxItems`, `itemsAfterCollapse`, `itemsBeforeCollapse` | — |
-| `Link` | `import { Link } from "@matteoaliano/forest-ui"` | `href`, `underline: "none" \| "hover" \| "always"`, `color`, `variant` | — |
-| `Menu` + `MenuList` | `import { Menu, MenuList } from "@matteoaliano/forest-ui"` | Menu: `open` (required), `anchorEl`, `onClose`; use with `MenuItem` | — |
-| `Pagination` | `import { Pagination } from "@matteoaliano/forest-ui"` | `count`, `page`, `onChange`, `variant: "text" \| "outlined"`, `shape`, `size`, `color`, `showFirstButton`, `showLastButton` | — |
-| `Stepper` family | `import { Stepper, Step, StepLabel } from "@matteoaliano/forest-ui"` | `activeStep`, `orientation`, `alternativeLabel`, `nonLinear`; Step: `completed`, `disabled`; StepLabel: `optional`, `error` | — |
-| `Tabs` + `Tab` | `import { Tabs, Tab } from "@matteoaliano/forest-ui"` | Tabs: `value`, `onChange`, `variant: "standard" \| "scrollable" \| "fullWidth"`, `orientation`, `centered`; Tab: `label`, `icon`, `iconPosition`, `disabled`, `value` | — |
-| `SidebarNav` | `import { SidebarNav, SidebarItem, useSidebar } from "@matteoaliano/forest-ui"` | `open`, `onOpenChange`, `behavior: "permanent" \| "hover"`, `expandedWidth`, `collapsedWidth`, `showToggle`, `header`, `footer` | `expandedWidth=240`, `collapsedWidth=48`, `behavior="permanent"` |
-| `SidebarItem` | (same import) | `icon` (required), `label` (required), `endAdornment`, `selected`, `onClick`, `disabled` | — |
-| `BottomNavigation` | `import { BottomNavigation } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `showLabels` |
-| `BottomNavigationAction` | `import { BottomNavigationAction } from "@matteoaliano/forest-ui"` | `label`, `icon`, `value`, `showLabel` |
-| `SpeedDial` | `import { SpeedDial } from "@matteoaliano/forest-ui"` | `ariaLabel` (required), `open`, `onOpen`, `onClose`, `icon`, `direction` |
-| `SpeedDialAction` | `import { SpeedDialAction } from "@matteoaliano/forest-ui"` | `icon`, `tooltipTitle`, `onClick` |
-| `SpeedDialIcon` | `import { SpeedDialIcon } from "@matteoaliano/forest-ui"` | `icon`, `openIcon` |
-| `MobileStepper` | `import { MobileStepper } from "@matteoaliano/forest-ui"` | `steps`, `activeStep`, `variant: "dots" \| "progress" \| "text"`, `nextButton`, `backButton` |
-| `PaginationItem` | `import { PaginationItem } from "@matteoaliano/forest-ui"` | `type`, `page`, `selected`, `disabled`, `shape`, `size` |
-| `StepButton` | `import { StepButton } from "@matteoaliano/forest-ui"` | `optional`, `children`, `onClick` |
-| `StepConnector` | `import { StepConnector } from "@matteoaliano/forest-ui"` | (styling via theme) |
-| `StepContent` | `import { StepContent } from "@matteoaliano/forest-ui"` | `children`, `TransitionComponent`, `transitionDuration` |
-| `StepIcon` | `import { StepIcon } from "@matteoaliano/forest-ui"` | `active`, `completed`, `error`, `icon` |
-| `TabScrollButton` | `import { TabScrollButton } from "@matteoaliano/forest-ui"` | `direction: "left" \| "right"`, `orientation`, `disabled` |
-
-## Charts
-
-Requires `@mui/x-charts` peer dependency. All chart components are re-exported from `@matteoaliano/forest-ui` — never import directly from `@mui/x-charts`. Chart colors are automatically applied from the theme's 12-color series palette.
-
-### Chart Components
-
-| Component | Import | Variants / Key Props | Default Props |
-|-----------|--------|----------------------|---------------|
-| `BarChart` | `import { BarChart } from "@matteoaliano/forest-ui"` | `series` (supports `variant: "solid" \| "striped"` per series), `colors`, `xAxis`, `yAxis`, `width`, `height` | `grid horizontal`, `borderRadius=4`, highlight/fade on hover |
-| `LineChart` | `import { LineChart } from "@matteoaliano/forest-ui"` | `series`, `colors`, `xAxis`, `yAxis`, `width`, `height` | `curve="linear"`, `strokeWidth=3`, `grid horizontal`, highlight/fade on hover |
-| `PieChart` | `import { PieChart } from "@matteoaliano/forest-ui"` | `series` (data: `{ id, value, label, color? }[]`), `colors`, `width`, `height` | highlight/fade on hover |
-| `ScatterChart` | `import { ScatterChart } from "@matteoaliano/forest-ui"` | `series`, `colors`, `xAxis`, `yAxis`, `width`, `height` | — |
-| `Gauge` | `import { Gauge } from "@matteoaliano/forest-ui"` | `value`, `valueMin`, `valueMax`, `startAngle`, `endAngle`, `width`, `height` | — |
-| `SparkLineChart` | `import { SparkLineChart } from "@matteoaliano/forest-ui"` | `data`, `plotType: "line" \| "bar"`, `width`, `height`, `colors` | — |
-| `useChartColors` | `import { useChartColors } from "@matteoaliano/forest-ui"` | `useChartColors(count)` — returns `string[]` of theme chart series colors (max 12) | — |
-
-### Chart Composition Primitives
-
-For building custom chart layouts, these low-level primitives are also available:
-
-- **Containers:** `ChartContainer`, `ResponsiveChartContainer`, `ChartsSurface`, `ChartsClipPath`
-- **Axis & Grid:** `ChartsAxis`, `ChartsXAxis`, `ChartsYAxis`, `ChartsGrid`, `ChartsReferenceLine`
-- **Legend & Tooltip:** `ChartsLegend`, `DefaultChartsLegend`, `ChartsTooltip`, `ChartsAxisTooltipContent`, `ChartsItemTooltipContent`, `ContinuousColorLegend`, `PiecewiseColorLegend`
-- **Gauge parts:** `GaugeContainer`, `GaugeReferenceArc`, `GaugeValueArc`, `GaugeValueText`
-- **Plot layers — Bar:** `BarPlot`, `BarElement`, `BarElementPath`, `BarLabel`
-- **Plot layers — Line & Area:** `LinePlot`, `LineElement`, `AreaPlot`, `AreaElement`, `LineHighlightPlot`, `MarkPlot`, `AnimatedArea`, `AnimatedLine`
-- **Plot layers — Pie:** `PiePlot`, `PieArc`, `PieArcPlot`, `PieArcLabel`, `PieArcLabelPlot`
-- **Plot layers — Scatter:** `ScatterPlot`, `Scatter`
-- **Interaction:** `ChartsAxisHighlight`, `ChartsOnAxisClickHandler`, `ChartsVoronoiHandler`, `HighlightedProvider`
-- **Text:** `ChartsText`
-- **Hooks:** `useDrawingArea`, `useChartId`, `useSvgRef`, `useXAxis`, `useXScale`, `useYAxis`, `useYScale`, `useAxisTooltip`, `useItemTooltip`, `useMouseTracker`, `useHighlighted`, `useItemHighlighted`, `useGaugeState`
-- **Color palettes:** `blueberryTwilightPalette`, `cheerfulFiestaPalette`, `mangoFusionPalette` (each with `Light` and `Dark` variants)
-
-## Transitions
-
-| Component | Import | Key Props |
-|-----------|--------|-----------|
-| `Collapse` | `import { Collapse } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `orientation: "vertical" \| "horizontal"`, `collapsedSize`, `unmountOnExit` |
-| `Fade` | `import { Fade } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
-| `Grow` | `import { Grow } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
-| `Slide` | `import { Slide } from "@matteoaliano/forest-ui"` | `in`, `direction: "up" \| "down" \| "left" \| "right"`, `timeout`, `container` |
-| `Zoom` | `import { Zoom } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
-
-## Utilities
-
-| Component | Import | Key Props |
-|-----------|--------|-----------|
-| `ClickAwayListener` | `import { ClickAwayListener } from "@matteoaliano/forest-ui"` | `onClickAway` (required), `mouseEvent`, `touchEvent`, `children` |
-| `NoSsr` | `import { NoSsr } from "@matteoaliano/forest-ui"` | `defer`, `fallback`, `children` |
-| `Portal` | `import { Portal } from "@matteoaliano/forest-ui"` | `container`, `disablePortal`, `children` |
-| `Popper` | `import { Popper } from "@matteoaliano/forest-ui"` | `open` (required), `anchorEl`, `placement`, `transition`, `modifiers` |
-| `TextareaAutosize` | `import { TextareaAutosize } from "@matteoaliano/forest-ui"` | `minRows`, `maxRows`, all textarea HTML attributes |
-| `SvgIcon` | `import { SvgIcon } from "@matteoaliano/forest-ui"` | `viewBox`, `fontSize`, `color`, `children` (SVG path elements) |
-| `ButtonBase` | `import { ButtonBase } from "@matteoaliano/forest-ui"` | `onClick`, `disabled`, `href`, `component`, `disableRipple` |
-| `GlobalStyles` | `import { GlobalStyles } from "@matteoaliano/forest-ui"` | `styles` (required) — CSS object or function |
-
-## Hooks
-
-| Hook | Import | Signature |
-|------|--------|-----------|
-| `useMediaQuery` | `import { useMediaQuery } from "@matteoaliano/forest-ui"` | `useMediaQuery(query): boolean` — responsive breakpoint detection |
-| `useScrollTrigger` | `import { useScrollTrigger } from "@matteoaliano/forest-ui"` | `useScrollTrigger(options?): boolean` — detect scroll for hide-on-scroll AppBars |
-| `useFormControl` | `import { useFormControl } from "@matteoaliano/forest-ui"` | `useFormControl(): FormControlState` — access parent FormControl state |
-| `useTheme` | `import { useTheme } from "@matteoaliano/forest-ui"` | `useTheme(): Theme` — access the current MUI theme object |
+# Forest UI — Component Reference
+
+> Full API reference for all components exported by `@matteoaliano/forest-ui`.
+
+## Import Pattern
+
+```tsx
+// CORRECT — import from forest-ui
+import { Button, TextField, Alert } from "@matteoaliano/forest-ui";
+
+// WRONG — never import from @mui/material
+import Button from "@mui/material/Button";
+```
+
+> **All MUI components are re-exported.** Never import from `@mui/material` — always use `@matteoaliano/forest-ui`. The only exception is `@mui/icons-material` for icons.
+
+## Layout
+
+| Component | Import | Key Props |
+|-----------|--------|-----------|
+| `Box` | `import { Box } from "@matteoaliano/forest-ui"` | `sx`, `component`, all HTML attributes |
+| `Stack` | `import { Stack } from "@matteoaliano/forest-ui"` | `direction`, `spacing`, `divider`, `alignItems`, `justifyContent` |
+| `Grid` | `import { Grid } from "@matteoaliano/forest-ui"` | `container`, `size`, `spacing`, `offset`, `columns`, `direction` |
+| `Container` | `import { Container } from "@matteoaliano/forest-ui"` | `maxWidth: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| false`, `fixed`, `disableGutters` |
+
+## Form Helpers
+
+| Component | Import | Key Props |
+|-----------|--------|-----------|
+| `FormControl` | `import { FormControl } from "@matteoaliano/forest-ui"` | `variant`, `fullWidth`, `error`, `disabled`, `required`, `size` |
+| `FormControlLabel` | `import { FormControlLabel } from "@matteoaliano/forest-ui"` | `control` (required), `label`, `labelPlacement`, `disabled` |
+| `FormGroup` | `import { FormGroup } from "@matteoaliano/forest-ui"` | `row`, `children` |
+| `FormHelperText` | `import { FormHelperText } from "@matteoaliano/forest-ui"` | `error`, `disabled`, `margin` |
+| `FormLabel` | `import { FormLabel } from "@matteoaliano/forest-ui"` | `error`, `focused`, `required`, `disabled`, `color` |
+| `InputAdornment` | `import { InputAdornment } from "@matteoaliano/forest-ui"` | `position: "start" \| "end"`, `variant`, `disablePointerEvents` |
+| `InputBase` | `import { InputBase } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `placeholder`, `multiline`, `rows`, `startAdornment`, `endAdornment` |
+| `InputLabel` | `import { InputLabel } from "@matteoaliano/forest-ui"` | `shrink`, `variant`, `error`, `required`, `disabled` |
+| `OutlinedInput` | `import { OutlinedInput } from "@matteoaliano/forest-ui"` | `label`, `notched`, all InputBase props |
+| `FilledInput` | `import { FilledInput } from "@matteoaliano/forest-ui"` | All InputBase props |
+
+## Inputs
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `Button` | `import { Button } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `color`, `size: "small" \| "medium" \| "large"`, `disabled`, `startIcon`, `endIcon`, `fullWidth`, `href` | `variant="contained"` |
+| `ButtonGroup` | `import { ButtonGroup } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `size: "small" \| "medium" \| "large"`, `orientation: "horizontal" \| "vertical"`, `color`, `disabled`, `fullWidth` | `variant="contained"` |
+| `TextField` | `import { TextField } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `label`, `error`, `helperText`, `fullWidth`, `multiline`, `rows`, `type`, `placeholder`, `required`, `disabled` | — |
+| `Select` + `MenuItem` | `import { Select, MenuItem } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `multiple`, `displayEmpty`, `label`, `labelId`, `renderValue`, `native`, `error`, `disabled` | — |
+| `MultiSelect` | `import { MultiSelect } from "@matteoaliano/forest-ui"` | `options: { label, value }[]`, `value: string[]`, `onChange: (values) => void`, `selectAll: boolean`, `selectAllLabel: string`, `label` + all SelectProps | `selectAll={true}`, `selectAllLabel="Select All"` |
+| `Checkbox` | `import { Checkbox } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `indeterminate`, `disabled` | — |
+| `RadioGroup` + `Radio` | `import { RadioGroup, Radio } from "@matteoaliano/forest-ui"` | `row`, `value`, `onChange`; Radio: `color`, `size: "small" \| "medium" \| "large"`, `disabled` | — |
+| `Switch` | `import { Switch } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `disabled` | — |
+| `ToggleButton` + `ToggleButtonGroup` | `import { ToggleButton, ToggleButtonGroup } from "@matteoaliano/forest-ui"` | `value`, `exclusive`, `onChange`, `orientation: "horizontal" \| "vertical"`, `size: "small" \| "medium" \| "large"`, `color`, `fullWidth` | — |
+| `Fab` | `import { Fab } from "@matteoaliano/forest-ui"` | `variant: "circular" \| "extended"`, `size: "small" \| "medium" \| "large"`, `color`, `disabled`, `href` | `color="primary"` |
+| `IconButton` | `import { IconButton } from "@matteoaliano/forest-ui"` | `color: "inherit" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "default"`, `size: "small" \| "medium" \| "large"`, `disabled`, `disableRipple` | — |
+| `Autocomplete` | `import { Autocomplete } from "@matteoaliano/forest-ui"` | `options`, `renderInput` (required), `multiple`, `freeSolo`, `disableClearable`, `loading`, `groupBy`, `limitTags`, `filterOptions` | — |
+| `Search` | `import { Search } from "@matteoaliano/forest-ui"` | `onClear`, `placeholder`, all TextField props (except `variant`) | `variant="outlined"`, `placeholder="Search..."`, built-in search icon and clear button |
+| `Input` | `import { Input } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `placeholder`, `multiline`, `rows`, `startAdornment`, `endAdornment`, `disabled`, `error` — all InputBase props | — |
+| `DatePicker` | `import { DatePicker } from "@matteoaliano/forest-ui"` | All MUI X DatePicker props (`value`, `onChange`, `label`, `format`, `minDate`, `maxDate`, `disabled`, `readOnly`) | Wraps with `LocalizationProvider` + `AdapterDayjs` automatically |
+
+## Data Display
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `Badge` | `import { Badge } from "@matteoaliano/forest-ui"` | `variant: "standard" \| "dot"`, `color`, `badgeContent`, `max`, `invisible`, `showZero`, `overlap: "rectangular" \| "circular"`, `anchorOrigin` | — |
+| `Chip` | `import { Chip } from "@matteoaliano/forest-ui"` | `variant: "filled" \| "outlined"`, `color`, `size: "small" \| "medium"`, `label`, `onDelete`, `clickable`, `avatar`, `icon` | `deleteIcon={<CloseOutlined />}` |
+| `Divider` | `import { Divider } from "@matteoaliano/forest-ui"` | `orientation: "horizontal" \| "vertical"`, `variant: "fullWidth" \| "inset" \| "middle"`, `textAlign`, `flexItem` | — |
+| `Typography` | `import { Typography } from "@matteoaliano/forest-ui"` | `variant: "h1"-"h6" \| "subtitle1" \| "subtitle2" \| "body1" \| "body2" \| "caption" \| "overline" \| "button"`, `align`, `gutterBottom`, `noWrap` | — |
+| `Tooltip` | `import { Tooltip } from "@matteoaliano/forest-ui"` | `title` (required), `placement` (12 positions), `arrow`, `followCursor`, `enterDelay`, `leaveDelay` | `arrow={true}` |
+| `Avatar` | `import { Avatar } from "@matteoaliano/forest-ui"` | `src`, `alt`, `variant: "circular" \| "rounded" \| "square"`, `sizes`, `children` (fallback) |
+| `AvatarGroup` | `import { AvatarGroup } from "@matteoaliano/forest-ui"` | `max`, `total`, `spacing`, `variant` |
+| `ImageList` | `import { ImageList } from "@matteoaliano/forest-ui"` | `variant: "masonry" \| "quilted" \| "standard" \| "woven"`, `cols`, `gap`, `rowHeight` |
+| `ImageListItem` | `import { ImageListItem } from "@matteoaliano/forest-ui"` | `cols`, `rows` |
+| `ImageListItemBar` | `import { ImageListItemBar } from "@matteoaliano/forest-ui"` | `title`, `subtitle`, `position`, `actionIcon` |
+| `Logo` | `import { Logo } from "@matteoaliano/forest-ui"` | `product: "wsuite" \| "studio" \| "feedati" \| "ai-hub"`, `variant: "logo" \| "logomark"`, `color: "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`, `color="positive"`. Studio and AI Hub `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. WSuite/FeeDati only define `positive`; other colors fall back. `negative-payoff` falls back to `negative` for `logomark` (no payoff to invert). |
+| `Rating` | `import { Rating } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `precision`, `max`, `size`, `readOnly`, `disabled` |
+| `Table` family | `import { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from "@matteoaliano/forest-ui"` | Table: `size: "small" \| "medium"`, `stickyHeader`; TableCell: `align`, `padding`, `sortDirection`, `variant`; TableRow: `hover`, `selected` | — |
+| `DataGrid` | `import { DataGrid, type GridColDef, type GridRenderCellParams, type GridRowSelectionModel } from "@matteoaliano/forest-ui"` | `rows`, `columns`, `paginationModel`, `sortModel`, `filterModel`, `checkboxSelection`, `loading`, `density`. Types: `GridColDef`, `GridRowsProp`, `GridRowParams`, `GridCellParams`, `GridRenderCellParams`, `GridRowSelectionModel`, `GridSortModel`, `GridFilterModel`, `GridPaginationModel` | — |
+| `List` family | `import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListItemAvatar, ListSubheader } from "@matteoaliano/forest-ui"` | `dense`, `disablePadding`; ListItemButton: `selected`, `disabled`; ListItemText: `primary`, `secondary` | — |
+| `TableFooter` | `import { TableFooter } from "@matteoaliano/forest-ui"` | `component`, `children` |
+| `TablePagination` | `import { TablePagination } from "@matteoaliano/forest-ui"` | `count`, `page`, `rowsPerPage`, `onPageChange`, `onRowsPerPageChange` |
+| `TableSortLabel` | `import { TableSortLabel } from "@matteoaliano/forest-ui"` | `active`, `direction: "asc" \| "desc"`, `onClick` |
+| `ListItemSecondaryAction` | `import { ListItemSecondaryAction } from "@matteoaliano/forest-ui"` | `children` |
+| `SnackbarContent` | `import { SnackbarContent } from "@matteoaliano/forest-ui"` | `message`, `action` |
+
+## Surfaces
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `Accordion` family | `import { Accordion, AccordionSummary, AccordionDetails, AccordionActions } from "@matteoaliano/forest-ui"` | `expanded`, `defaultExpanded`, `onChange`, `disabled`, `disableGutters`, `square` | — |
+| `AppBar` + `Toolbar` | `import { AppBar, Toolbar } from "@matteoaliano/forest-ui"` | `position`, `color`, `elevation`; Toolbar: `variant: "dense" \| "regular"` | — |
+| `AppBarNavItem` | `import { AppBarNavItem } from "@matteoaliano/forest-ui"` | `label` (required), `icon`, `selected`, `href`, `sx` — navigation button for AppBar | — |
+| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
+| `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
+| `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
+| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
+| `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
+
+## Feedback
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `Alert` + `AlertTitle` | `import { Alert, AlertTitle } from "@matteoaliano/forest-ui"` | `severity: "success" \| "info" \| "warning" \| "error"`, `variant: "filled" \| "outlined" \| "standard"`, `color`, `icon`, `action`, `onClose` | — |
+| `Dialog` family | `import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText } from "@matteoaliano/forest-ui"` | `open` (required), `onClose`, `fullWidth`, `maxWidth`, `fullScreen`, `scroll: "paper" \| "body"` | — |
+| `Backdrop` | `import { Backdrop } from "@matteoaliano/forest-ui"` | `open` (required), `invisible`, `onClick` | — |
+| `LinearProgress` | `import { LinearProgress } from "@matteoaliano/forest-ui"` | `variant: "indeterminate" \| "determinate" \| "buffer" \| "query"`, `value` (0-100), `color` | — |
+| `CircularProgress` | `import { CircularProgress } from "@matteoaliano/forest-ui"` | `variant: "indeterminate" \| "determinate"`, `value` (0-100), `color`, `size`, `thickness` | — |
+| `Skeleton` | `import { Skeleton } from "@matteoaliano/forest-ui"` | `variant: "text" \| "circular" \| "rectangular" \| "rounded"`, `animation: "pulse" \| "wave" \| false`, `width`, `height` | — |
+| `Modal` | `import { Modal } from "@matteoaliano/forest-ui"` | `open` (required), `onClose`, `children`, `keepMounted`, `disableAutoFocus`, `disableEscapeKeyDown` | — |
+| `Popover` | `import { Popover } from "@matteoaliano/forest-ui"` | `open` (required), `anchorEl`, `onClose`, `anchorOrigin`, `transformOrigin`, `elevation` | — |
+| `Snackbar` | `import { Snackbar } from "@matteoaliano/forest-ui"` | `open`, `message`, `autoHideDuration`, `onClose`, `action`, `anchorOrigin` | — |
+| `Slider` | `import { Slider } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `min`, `max`, `step`, `marks`, `valueLabelDisplay`, `orientation`, `size` | — |
+
+## Navigation
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `Breadcrumbs` | `import { Breadcrumbs } from "@matteoaliano/forest-ui"` | `separator`, `maxItems`, `itemsAfterCollapse`, `itemsBeforeCollapse` | — |
+| `Link` | `import { Link } from "@matteoaliano/forest-ui"` | `href`, `underline: "none" \| "hover" \| "always"`, `color`, `variant` | — |
+| `Menu` + `MenuList` | `import { Menu, MenuList } from "@matteoaliano/forest-ui"` | Menu: `open` (required), `anchorEl`, `onClose`; use with `MenuItem` | — |
+| `Pagination` | `import { Pagination } from "@matteoaliano/forest-ui"` | `count`, `page`, `onChange`, `variant: "text" \| "outlined"`, `shape`, `size`, `color`, `showFirstButton`, `showLastButton` | — |
+| `Stepper` family | `import { Stepper, Step, StepLabel } from "@matteoaliano/forest-ui"` | `activeStep`, `orientation`, `alternativeLabel`, `nonLinear`; Step: `completed`, `disabled`; StepLabel: `optional`, `error` | — |
+| `Tabs` + `Tab` | `import { Tabs, Tab } from "@matteoaliano/forest-ui"` | Tabs: `value`, `onChange`, `variant: "standard" \| "scrollable" \| "fullWidth"`, `orientation`, `centered`; Tab: `label`, `icon`, `iconPosition`, `disabled`, `value` | — |
+| `SidebarNav` | `import { SidebarNav, SidebarItem, useSidebar } from "@matteoaliano/forest-ui"` | `open`, `onOpenChange`, `behavior: "permanent" \| "hover"`, `expandedWidth`, `collapsedWidth`, `showToggle`, `header`, `footer` | `expandedWidth=240`, `collapsedWidth=48`, `behavior="permanent"` |
+| `SidebarItem` | (same import) | `icon` (required), `label` (required), `endAdornment`, `selected`, `onClick`, `disabled` | — |
+| `BottomNavigation` | `import { BottomNavigation } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `showLabels` |
+| `BottomNavigationAction` | `import { BottomNavigationAction } from "@matteoaliano/forest-ui"` | `label`, `icon`, `value`, `showLabel` |
+| `SpeedDial` | `import { SpeedDial } from "@matteoaliano/forest-ui"` | `ariaLabel` (required), `open`, `onOpen`, `onClose`, `icon`, `direction` |
+| `SpeedDialAction` | `import { SpeedDialAction } from "@matteoaliano/forest-ui"` | `icon`, `tooltipTitle`, `onClick` |
+| `SpeedDialIcon` | `import { SpeedDialIcon } from "@matteoaliano/forest-ui"` | `icon`, `openIcon` |
+| `MobileStepper` | `import { MobileStepper } from "@matteoaliano/forest-ui"` | `steps`, `activeStep`, `variant: "dots" \| "progress" \| "text"`, `nextButton`, `backButton` |
+| `PaginationItem` | `import { PaginationItem } from "@matteoaliano/forest-ui"` | `type`, `page`, `selected`, `disabled`, `shape`, `size` |
+| `StepButton` | `import { StepButton } from "@matteoaliano/forest-ui"` | `optional`, `children`, `onClick` |
+| `StepConnector` | `import { StepConnector } from "@matteoaliano/forest-ui"` | (styling via theme) |
+| `StepContent` | `import { StepContent } from "@matteoaliano/forest-ui"` | `children`, `TransitionComponent`, `transitionDuration` |
+| `StepIcon` | `import { StepIcon } from "@matteoaliano/forest-ui"` | `active`, `completed`, `error`, `icon` |
+| `TabScrollButton` | `import { TabScrollButton } from "@matteoaliano/forest-ui"` | `direction: "left" \| "right"`, `orientation`, `disabled` |
+
+## Charts
+
+Requires `@mui/x-charts` peer dependency. All chart components are re-exported from `@matteoaliano/forest-ui` — never import directly from `@mui/x-charts`. Chart colors are automatically applied from the theme's 12-color series palette.
+
+### Chart Components
+
+| Component | Import | Variants / Key Props | Default Props |
+|-----------|--------|----------------------|---------------|
+| `BarChart` | `import { BarChart } from "@matteoaliano/forest-ui"` | `series` (supports `variant: "solid" \| "striped"` per series), `colors`, `xAxis`, `yAxis`, `width`, `height` | `grid horizontal`, `borderRadius=4`, highlight/fade on hover |
+| `LineChart` | `import { LineChart } from "@matteoaliano/forest-ui"` | `series`, `colors`, `xAxis`, `yAxis`, `width`, `height` | `curve="linear"`, `strokeWidth=3`, `grid horizontal`, highlight/fade on hover |
+| `PieChart` | `import { PieChart } from "@matteoaliano/forest-ui"` | `series` (data: `{ id, value, label, color? }[]`), `colors`, `width`, `height` | highlight/fade on hover |
+| `ScatterChart` | `import { ScatterChart } from "@matteoaliano/forest-ui"` | `series`, `colors`, `xAxis`, `yAxis`, `width`, `height` | — |
+| `Gauge` | `import { Gauge } from "@matteoaliano/forest-ui"` | `value`, `valueMin`, `valueMax`, `startAngle`, `endAngle`, `width`, `height` | — |
+| `SparkLineChart` | `import { SparkLineChart } from "@matteoaliano/forest-ui"` | `data`, `plotType: "line" \| "bar"`, `width`, `height`, `colors` | — |
+| `useChartColors` | `import { useChartColors } from "@matteoaliano/forest-ui"` | `useChartColors(count)` — returns `string[]` of theme chart series colors (max 12) | — |
+
+### Chart Composition Primitives
+
+For building custom chart layouts, these low-level primitives are also available:
+
+- **Containers:** `ChartContainer`, `ResponsiveChartContainer`, `ChartsSurface`, `ChartsClipPath`
+- **Axis & Grid:** `ChartsAxis`, `ChartsXAxis`, `ChartsYAxis`, `ChartsGrid`, `ChartsReferenceLine`
+- **Legend & Tooltip:** `ChartsLegend`, `DefaultChartsLegend`, `ChartsTooltip`, `ChartsAxisTooltipContent`, `ChartsItemTooltipContent`, `ContinuousColorLegend`, `PiecewiseColorLegend`
+- **Gauge parts:** `GaugeContainer`, `GaugeReferenceArc`, `GaugeValueArc`, `GaugeValueText`
+- **Plot layers — Bar:** `BarPlot`, `BarElement`, `BarElementPath`, `BarLabel`
+- **Plot layers — Line & Area:** `LinePlot`, `LineElement`, `AreaPlot`, `AreaElement`, `LineHighlightPlot`, `MarkPlot`, `AnimatedArea`, `AnimatedLine`
+- **Plot layers — Pie:** `PiePlot`, `PieArc`, `PieArcPlot`, `PieArcLabel`, `PieArcLabelPlot`
+- **Plot layers — Scatter:** `ScatterPlot`, `Scatter`
+- **Interaction:** `ChartsAxisHighlight`, `ChartsOnAxisClickHandler`, `ChartsVoronoiHandler`, `HighlightedProvider`
+- **Text:** `ChartsText`
+- **Hooks:** `useDrawingArea`, `useChartId`, `useSvgRef`, `useXAxis`, `useXScale`, `useYAxis`, `useYScale`, `useAxisTooltip`, `useItemTooltip`, `useMouseTracker`, `useHighlighted`, `useItemHighlighted`, `useGaugeState`
+- **Color palettes:** `blueberryTwilightPalette`, `cheerfulFiestaPalette`, `mangoFusionPalette` (each with `Light` and `Dark` variants)
+
+## Transitions
+
+| Component | Import | Key Props |
+|-----------|--------|-----------|
+| `Collapse` | `import { Collapse } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `orientation: "vertical" \| "horizontal"`, `collapsedSize`, `unmountOnExit` |
+| `Fade` | `import { Fade } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
+| `Grow` | `import { Grow } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
+| `Slide` | `import { Slide } from "@matteoaliano/forest-ui"` | `in`, `direction: "up" \| "down" \| "left" \| "right"`, `timeout`, `container` |
+| `Zoom` | `import { Zoom } from "@matteoaliano/forest-ui"` | `in`, `timeout`, `appear` |
+
+## Utilities
+
+| Component | Import | Key Props |
+|-----------|--------|-----------|
+| `ClickAwayListener` | `import { ClickAwayListener } from "@matteoaliano/forest-ui"` | `onClickAway` (required), `mouseEvent`, `touchEvent`, `children` |
+| `NoSsr` | `import { NoSsr } from "@matteoaliano/forest-ui"` | `defer`, `fallback`, `children` |
+| `Portal` | `import { Portal } from "@matteoaliano/forest-ui"` | `container`, `disablePortal`, `children` |
+| `Popper` | `import { Popper } from "@matteoaliano/forest-ui"` | `open` (required), `anchorEl`, `placement`, `transition`, `modifiers` |
+| `TextareaAutosize` | `import { TextareaAutosize } from "@matteoaliano/forest-ui"` | `minRows`, `maxRows`, all textarea HTML attributes |
+| `SvgIcon` | `import { SvgIcon } from "@matteoaliano/forest-ui"` | `viewBox`, `fontSize`, `color`, `children` (SVG path elements) |
+| `ButtonBase` | `import { ButtonBase } from "@matteoaliano/forest-ui"` | `onClick`, `disabled`, `href`, `component`, `disableRipple` |
+| `GlobalStyles` | `import { GlobalStyles } from "@matteoaliano/forest-ui"` | `styles` (required) — CSS object or function |
+
+## Hooks
+
+| Hook | Import | Signature |
+|------|--------|-----------|
+| `useMediaQuery` | `import { useMediaQuery } from "@matteoaliano/forest-ui"` | `useMediaQuery(query): boolean` — responsive breakpoint detection |
+| `useScrollTrigger` | `import { useScrollTrigger } from "@matteoaliano/forest-ui"` | `useScrollTrigger(options?): boolean` — detect scroll for hide-on-scroll AppBars |
+| `useFormControl` | `import { useFormControl } from "@matteoaliano/forest-ui"` | `useFormControl(): FormControlState` — access parent FormControl state |
+| `useTheme` | `import { useTheme } from "@matteoaliano/forest-ui"` | `useTheme(): Theme` — access the current MUI theme object |