material-theme-builder 2.1.2 → 3.0.0

package/README.md

@@ -45,8 +45,20 @@ const theme = builder("#6750A4", {
 theme.toFigmaTokens();
 theme.toJson();
 theme.toCss();
+theme.toTailwind();
+theme.toFlutter();
+theme.toShadcn();
 ```
 
+> [!NOTE]
+>
+> The root entry costs a client bundle nothing. It holds `builder` alone — the
+> React bindings live at [`material-theme-builder/react`](#react) and are the
+> only thing carrying `"use client"`. So you can call `builder` from a
+> [React Server Component](https://react.dev/reference/rsc/server-components)
+> and emit `toCss()` into the document yourself, rather than let `<Mcu>` do it
+> on the client, without shipping React components the page never renders.
+
 ## CLI
 
 ```sh
@@ -59,10 +71,12 @@ See `npx material-theme-builder --help` for all available options.
 
 ## React
 
+The React bindings live on their own entry point, `material-theme-builder/react`.
+
 CSS variables are injected into the page:
 
 ```tsx
-import { Mcu } from "material-theme-builder";
+import { Mcu } from "material-theme-builder/react";
 
 <Mcu
   source="#0e1216"
@@ -101,7 +115,7 @@ import { Mcu } from "material-theme-builder";
 A hook is also provided:
 
 ```tsx
-import { useMcu } from "material-theme-builder";
+import { useMcu } from "material-theme-builder/react";
 
 const { initials, setMcuConfig, getMcuColor } = useMcu();
 
@@ -117,8 +131,6 @@ return (
 Compatible through [theme variables](https://tailwindcss.com/docs/theme):
 
 ```css
-@import "tailwindcss";
-
 @theme inline {
   --color-background: var(--md-sys-color-background);
   --color-on-background: var(--md-sys-color-on-background);
@@ -450,6 +462,12 @@ Pre-requisites:
 $ pnpm i
 ```
 
+## Figma plugin
+
+1. `pnpm run build-figma`
+2. In Figma: Plugins → Development → Import plugin from manifest…
+3. Select `figma-plugin/manifest.json`
+
 ## Validation
 
 ```sh