@matteoaliano/forest-ui 0.8.1 → 0.8.3

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,22 +331,57 @@ 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' | 'ai-hub';
+/**
+ * AUTO-GENERATED by scripts/generate-logo-inner.mjs — do not edit by hand.
+ *
+ * Inner SVG markup for the <Logo> component, sourced from /logos/. Figma
+ * instance suffixes have been replaced with `__ID__` so the runtime can
+ * substitute a unique identifier per <Logo> instance.
+ */
+type LogoVariant$1 = "logo" | "logomark";
+type LogoColor$1 = "default" | "positive" | "negative" | "negative-payoff";
+interface LogoArtwork {
+    viewBox: string;
+    inner: string;
+}
+declare const PRODUCT_ARTWORK: {
+    readonly studio: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly "ai-hub": Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly contix: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly sentimenthub: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly adgenie: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly "revenue-pulse": Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+};
+type LogoProductKey = keyof typeof PRODUCT_ARTWORK;
+
+/**
+ * All product brands exposed by `<Logo>`. Driven entirely by the SVG files
+ * under `/logos/<product>-logos/` — add a folder there and regenerate via
+ * `scripts/generate-logo-inner.mjs` to expose a new brand here.
+ */
+type LogoProduct = LogoProductKey;
 type LogoVariant = 'logo' | 'logomark';
-type LogoColor = 'positive' | 'negative' | 'negative-payoff';
+/**
+ * Color treatment.
+ *
+ * For `variant="logo"`:
+ *  - `default` — full-color artwork with depth (drop shadows, radial gradient). For hero usage.
+ *  - `positive` — flat colored wordmark, optimized for light surfaces.
+ *  - `negative` — white-only artwork for dark surfaces.
+ *  - `negative-payoff` — colored mark + light payoff caption (use on a colored hero).
+ *
+ * For `variant="logomark"` only `default` and `negative` are valid. Other
+ * values fall back to `default`.
+ */
+type LogoColor = 'default' | 'positive' | 'negative' | 'negative-payoff';
 interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
-    /** Product brand */
+    /** Product brand. Defaults to `studio`. */
     product?: LogoProduct;
-    /** `logo` = wordmark with payoff caption, `logomark` = square brand icon */
+    /** `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 treatment. Defaults to `default`. Logomarks only support
+     * `default` / `negative` — anything else falls back to `default`.
      */
     color?: LogoColor;
 }
@@ -354,9 +389,12 @@ interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
  * Logo component for the Forest product suite.
  *
  * @example
- * <Logo product="studio" variant="logo" color="positive" />
- * <Logo product="studio" variant="logo" color="negative" />
- * <Logo product="ai-hub" variant="logomark" color="negative" />
+ * <Logo product="studio" />                                       // default lockup
+ * <Logo product="studio" color="positive" />                      // flat positive
+ * <Logo product="adgenie" color="negative" />                     // for dark surfaces
+ * <Logo product="ai-hub" color="negative-payoff" />               // for a colored hero
+ * <Logo product="revenue-pulse" variant="logomark" />             // default mark
+ * <Logo product="revenue-pulse" variant="logomark" color="negative" />
  */
 declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 

package/dist/index.d.ts

@@ -331,22 +331,57 @@ 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' | 'ai-hub';
+/**
+ * AUTO-GENERATED by scripts/generate-logo-inner.mjs — do not edit by hand.
+ *
+ * Inner SVG markup for the <Logo> component, sourced from /logos/. Figma
+ * instance suffixes have been replaced with `__ID__` so the runtime can
+ * substitute a unique identifier per <Logo> instance.
+ */
+type LogoVariant$1 = "logo" | "logomark";
+type LogoColor$1 = "default" | "positive" | "negative" | "negative-payoff";
+interface LogoArtwork {
+    viewBox: string;
+    inner: string;
+}
+declare const PRODUCT_ARTWORK: {
+    readonly studio: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly "ai-hub": Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly contix: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly sentimenthub: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly adgenie: Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+    readonly "revenue-pulse": Record<LogoVariant$1, Partial<Record<LogoColor$1, LogoArtwork>>>;
+};
+type LogoProductKey = keyof typeof PRODUCT_ARTWORK;
+
+/**
+ * All product brands exposed by `<Logo>`. Driven entirely by the SVG files
+ * under `/logos/<product>-logos/` — add a folder there and regenerate via
+ * `scripts/generate-logo-inner.mjs` to expose a new brand here.
+ */
+type LogoProduct = LogoProductKey;
 type LogoVariant = 'logo' | 'logomark';
-type LogoColor = 'positive' | 'negative' | 'negative-payoff';
+/**
+ * Color treatment.
+ *
+ * For `variant="logo"`:
+ *  - `default` — full-color artwork with depth (drop shadows, radial gradient). For hero usage.
+ *  - `positive` — flat colored wordmark, optimized for light surfaces.
+ *  - `negative` — white-only artwork for dark surfaces.
+ *  - `negative-payoff` — colored mark + light payoff caption (use on a colored hero).
+ *
+ * For `variant="logomark"` only `default` and `negative` are valid. Other
+ * values fall back to `default`.
+ */
+type LogoColor = 'default' | 'positive' | 'negative' | 'negative-payoff';
 interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
-    /** Product brand */
+    /** Product brand. Defaults to `studio`. */
     product?: LogoProduct;
-    /** `logo` = wordmark with payoff caption, `logomark` = square brand icon */
+    /** `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 treatment. Defaults to `default`. Logomarks only support
+     * `default` / `negative` — anything else falls back to `default`.
      */
     color?: LogoColor;
 }
@@ -354,9 +389,12 @@ interface LogoProps extends Omit<BoxProps<'svg'>, 'component' | 'children'> {
  * Logo component for the Forest product suite.
  *
  * @example
- * <Logo product="studio" variant="logo" color="positive" />
- * <Logo product="studio" variant="logo" color="negative" />
- * <Logo product="ai-hub" variant="logomark" color="negative" />
+ * <Logo product="studio" />                                       // default lockup
+ * <Logo product="studio" color="positive" />                      // flat positive
+ * <Logo product="adgenie" color="negative" />                     // for dark surfaces
+ * <Logo product="ai-hub" color="negative-payoff" />               // for a colored hero
+ * <Logo product="revenue-pulse" variant="logomark" />             // default mark
+ * <Logo product="revenue-pulse" variant="logomark" color="negative" />
  */
 declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;