@matteoaliano/forest-ui 1.1.1 → 1.2.0

package/dist/theme.mjs

@@ -42,7 +42,7 @@ import {
   violet,
   warning,
   widths
-} from "./chunk-BCOHH5MJ.mjs";
+} from "./chunk-VIQ5IYUZ.mjs";
 export {
   alpha,
   avatarColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteoaliano/forest-ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Forest Design System — themed MUI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/skills/forest-alkemy-plus/SKILL.md

@@ -3,7 +3,7 @@ name: forest-alkemy-plus
 description: Forest UI Design System rules for the Alkemy+ (charcoal/red) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-alkemy-plus preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest alkemy", "forest alkemy+", "@matteoaliano/forest-ui".
 metadata:
   author: Forest Design System
-  version: 1.1.1
+  version: 1.2.0
 ---
 
 # Forest UI — Alkemy+ Preset
@@ -16,6 +16,7 @@ metadata:
 4. **Every widget, chart, or table inside a `<Page>` lives in a `<Card>`.** A clickable card wraps its content in `<CardActionArea>`.
 5. **No raw colors or spacing** (`#hex`, `rgb()`, `"16px"`) — use theme tokens via `sx` (`p: 4`, `color: "text.secondary"`, `backgroundColor: "primary.main"`). Never override a component's internals.
 6. **Dark mode is built in** — `defaultMode` on ForestProvider + `useColorScheme`. Never `createTheme`, a second `ThemeProvider`, or `.dark` CSS.
+7. **Never invent props, variants, or color names.** If you're not certain a prop/value exists, look it up in `references/components.md` or the component's exported type — don't guess. Before calling UI work done, run the project's typecheck (`tsc --noEmit` or the build) and fix every error; an unknown prop or variant value failing to compile means it doesn't exist.
 
 ## Setup (once per app)
 

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

@@ -65,7 +65,7 @@ import Button from "@mui/material/Button";
 | 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 />}` |
+| `Chip` | `import { Chip } from "@matteoaliano/forest-ui"` | `variant: "filled" \| "outlined"`, `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "teal" \| "orange" \| "purple" \| "pink" \| "fuchsia" \| "orangeDark" \| "green" \| "indigo" \| "rose" \| "blueLight"` (closed union — no other values exist), `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}` |
@@ -74,7 +74,7 @@ import Button from "@mui/material/Button";
 | `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). |
+| `Logo` | `import { Logo } from "@matteoaliano/forest-ui"` | `product: "studio" \| "ai-hub" \| "contix" \| "sentimenthub" \| "adgenie" \| "revenue-pulse" \| "contixdb" \| "feedati"`, `variant: "logo" \| "logomark"`, `color: "default" \| "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`. Logomarks only support `default`/`negative` (others fall back to `default`). `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. |
 | `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` | — |
@@ -92,7 +92,7 @@ import Button from "@mui/material/Button";
 | `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`. **If the card is clickable, wrap its content in `CardActionArea`** (see below) | — |
+| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `color: "primary" \| "secondary"` (secondary = `background.paper` face), `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action`. **If the card is clickable, wrap its content in `CardActionArea`** (see below) | `color="primary"` |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled`. **REQUIRED for any clickable card** — carries the faux-3D bevel + glaze + press affordance (same interaction language as Button) that signals a card is interactive. Never put `onClick` on a bare `Card`. | `<Card><CardActionArea onClick={…}><CardContent>…</CardContent></CardActionArea></Card>` |
 | `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |