@matteoaliano/forest-ui 0.8.0 → 0.8.2

package/README.md

@@ -4,26 +4,57 @@ Forest Design System — A multi-tenant MUI v7 + Emotion component library.
 
 ## Installation
 
+Install the package and its peer dependencies:
+
 ```bash
-npm install @matteoaliano/forest-ui
+npm install @matteoaliano/forest-ui \
+  @mui/material@^7 @mui/icons-material@^7 \
+  @mui/x-charts@^7 @mui/x-data-grid@^7 @mui/x-date-pickers@^8 \
+  @emotion/react @emotion/styled dayjs
 ```
 
+Forest UI re-exports MUI components with Forest defaults, so you should import everything from `@matteoaliano/forest-ui` rather than `@mui/material`. The only direct MUI import you need is `@mui/icons-material` for icons.
+
 ## Quick Start
 
 ```tsx
 import { ForestProvider, Button, Typography } from '@matteoaliano/forest-ui';
-import '@fontsource/poppins'; // or load Aeonik font
+import '@matteoaliano/forest-ui/fonts/aeonik/aeonik.css';
 
 function App() {
   return (
     <ForestProvider>
       <Typography variant="h1">Hello Forest</Typography>
-      <Button variant="contained">Click me</Button>
+      <Button>Click me</Button>
     </ForestProvider>
   );
 }
 ```
 
+## Next.js setup
+
+Forest UI works with Next.js 14 / 15 / 16 (App Router and Pages Router). For best results with Turbopack and bundle size, add the following to `next.config.js`:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@matteoaliano/forest-ui'],
+  experimental: {
+    optimizePackageImports: [
+      '@matteoaliano/forest-ui',
+      '@mui/material',
+      '@mui/icons-material',
+    ],
+  },
+};
+
+module.exports = nextConfig;
+```
+
+Because `ForestProvider` is a client component, wrap your app in a client boundary (a `'use client'` component or a dedicated `providers.tsx`) before mounting it inside the App Router root layout.
+
+> **Known issue:** some `@mui/x-*` packages have intermittent Turbopack issues upstream that are unrelated to Forest UI. If you hit one, falling back to webpack (`next dev` without `--turbo`) usually clears it.
+
 ## Theme Presets
 
 Three presets are available:

package/dist/index.d.mts

@@ -331,23 +331,32 @@ declare function Input({ ...props }: InputProps): react_jsx_runtime.JSX.Element;
 type IconButtonProps = IconButtonProps$1;
 declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-type LogoProduct = 'wsuite' | 'studio' | 'feedati';
+type LogoProduct = 'wsuite' | 'studio' | 'feedati' | 'ai-hub';
 type LogoVariant = 'logo' | 'logomark';
+type LogoColor = 'positive' | 'negative' | 'negative-payoff';
 interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
     /** Product brand */
     product?: LogoProduct;
-    /** Show full logo or icon only */
+    /** `logo` = wordmark with payoff caption, `logomark` = square brand icon */
     variant?: LogoVariant;
+    /**
+     * Color treatment.
+     * - `positive` (default): colored mark for use on light backgrounds
+     * - `negative`: white mark for use on dark backgrounds
+     * - `negative-payoff`: colored mark with light payoff caption (for use on a colored hero)
+     *
+     * Falls back to `positive` if a product doesn't define the requested color.
+     * `negative-payoff` falls back to `negative` for `logomark` variants (no payoff to invert).
+     */
+    color?: LogoColor;
 }
 /**
- * Logo component for Forest product suite
- *
- * Displays brand logos (WSuite, Studio, FeeDati) in full or icon-only variants.
- * Colors are embedded in the SVG.
+ * Logo component for the Forest product suite.
  *
  * @example
- * <Logo product="wsuite" variant="logo" />
- * <Logo product="studio" variant="logomark" />
+ * <Logo product="studio" variant="logo" color="positive" />
+ * <Logo product="studio" variant="logo" color="negative" />
+ * <Logo product="ai-hub" variant="logomark" color="negative" />
  */
 declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 

package/dist/index.d.ts

@@ -331,23 +331,32 @@ declare function Input({ ...props }: InputProps): react_jsx_runtime.JSX.Element;
 type IconButtonProps = IconButtonProps$1;
 declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-type LogoProduct = 'wsuite' | 'studio' | 'feedati';
+type LogoProduct = 'wsuite' | 'studio' | 'feedati' | 'ai-hub';
 type LogoVariant = 'logo' | 'logomark';
+type LogoColor = 'positive' | 'negative' | 'negative-payoff';
 interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
     /** Product brand */
     product?: LogoProduct;
-    /** Show full logo or icon only */
+    /** `logo` = wordmark with payoff caption, `logomark` = square brand icon */
     variant?: LogoVariant;
+    /**
+     * Color treatment.
+     * - `positive` (default): colored mark for use on light backgrounds
+     * - `negative`: white mark for use on dark backgrounds
+     * - `negative-payoff`: colored mark with light payoff caption (for use on a colored hero)
+     *
+     * Falls back to `positive` if a product doesn't define the requested color.
+     * `negative-payoff` falls back to `negative` for `logomark` variants (no payoff to invert).
+     */
+    color?: LogoColor;
 }
 /**
- * Logo component for Forest product suite
- *
- * Displays brand logos (WSuite, Studio, FeeDati) in full or icon-only variants.
- * Colors are embedded in the SVG.
+ * Logo component for the Forest product suite.
  *
  * @example
- * <Logo product="wsuite" variant="logo" />
- * <Logo product="studio" variant="logomark" />
+ * <Logo product="studio" variant="logo" color="positive" />
+ * <Logo product="studio" variant="logo" color="negative" />
+ * <Logo product="ai-hub" variant="logomark" color="negative" />
  */
 declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;