material-theme-builder 2.2.0 → 3.1.0

package/README.md

@@ -50,14 +50,6 @@ theme.toFlutter();
 theme.toShadcn();
 ```
 
-> [!NOTE]
->
-> `builder` is server-safe. Only the React entry points (`Mcu`, `useMcu`,
-> `ExportButton`) carry `"use client"`, so you can call it from a
-> [React Server Component](https://react.dev/reference/rsc/server-components)
-> — handy to emit `toCss()` into the document yourself rather than let `<Mcu>`
-> do it on the client.
-
 ## CLI
 
 ```sh
@@ -70,12 +62,14 @@ 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 { Mtb } from "material-theme-builder/react";
 
-<Mcu
+<Mtb
   source="#0e1216"
   scheme="vibrant"
   contrast={0.5}
@@ -94,7 +88,7 @@ import { Mcu } from "material-theme-builder";
       color: "var(--md-sys-color-on-my-custom-color-1)",
     }}>colors<span>!
   </p>
-</Mcu>
+</Mtb>
 ```
 
 > [!TIP]
@@ -107,14 +101,22 @@ import { Mcu } from "material-theme-builder";
 > CSS varnames are always kebab-cased, e.g. `myCustomColor1` →
 > `--md-sys-color-my-custom-color-1` / `--md-ref-palette-my-custom-color-1-<tone>`
 
-## `useMcu`
+> [!NOTE]
+>
+> `<Mtb>` injects the CSS from the client, and is the only thing here carrying
+> `"use client"`. The root entry holds `builder` alone — so from a
+> [React Server Component](https://react.dev/reference/rsc/server-components)
+> you can call it and emit `toCss()` into the document yourself, without
+> shipping components the page never renders.
+
+## `useMtb`
 
 A hook is also provided:
 
 ```tsx
-import { useMcu } from "material-theme-builder";
+import { useMtb } from "material-theme-builder/react";
 
-const { initials, setMcuConfig, getMcuColor } = useMcu();
+const { initials, setMcuConfig, getMcuColor } = useMtb();
 
 return (
   <button onClick={() => setMcuConfig({ ...initials, source: "#FF5722" })}>

package/dist/cli.js

@@ -594,29 +594,8 @@ function buildJson(ctx) {
   };
 }
 
-// src/lib/builder.tailwind.ts
-import { kebabCase as kebabCase3 } from "lodash-es";
-var SHADE_TO_TONE = [
-  [50, 95],
-  [100, 90],
-  [200, 80],
-  [300, 70],
-  [400, 60],
-  [500, 50],
-  [600, 40],
-  [700, 30],
-  [800, 20],
-  [900, 10],
-  [950, 5]
-];
-var CORE_PALETTES = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "error",
-  "neutral",
-  "neutral-variant"
-];
+// src/lib/builder.shadcn.ts
+import { camelCase } from "lodash-es";
 var SHADCN_MAPPING = [
   ["--background", "surface"],
   ["--foreground", "on-surface"],
@@ -650,6 +629,69 @@ var SHADCN_MAPPING = [
   ["--sidebar-border", "outline-variant"],
   ["--sidebar-ring", "primary"]
 ];
+function srgbToLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function round(n) {
+  return String(Number(n.toFixed(3)));
+}
+function argbToOklch(argb) {
+  const r = srgbToLinear((argb >> 16 & 255) / 255);
+  const g = srgbToLinear((argb >> 8 & 255) / 255);
+  const b = srgbToLinear((argb & 255) / 255);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const chroma = Math.hypot(a, bb);
+  const hue = Number(chroma.toFixed(3)) === 0 ? 0 : (Math.atan2(bb, a) * 180 / Math.PI + 360) % 360;
+  return `oklch(${round(lightness)} ${round(chroma)} ${round(hue)})`;
+}
+function toShadcnVars(mergedColors) {
+  const entries = SHADCN_MAPPING.map(([cssVar, m3Token]) => {
+    const argb = mergedColors[camelCase(m3Token)];
+    if (argb === void 0) {
+      throw new Error(
+        `M3 token '${m3Token}' is missing from the scheme, needed by '${cssVar}'. This is likely a bug in the implementation.`
+      );
+    }
+    return [cssVar.slice(2), argbToOklch(argb)];
+  });
+  return Object.fromEntries(entries);
+}
+function buildShadcn(ctx) {
+  const { mergedColorsLight, mergedColorsDark } = ctx;
+  return {
+    light: toShadcnVars(mergedColorsLight),
+    dark: toShadcnVars(mergedColorsDark)
+  };
+}
+
+// src/lib/builder.tailwind.ts
+import { kebabCase as kebabCase3 } from "lodash-es";
+var SHADE_TO_TONE = [
+  [50, 95],
+  [100, 90],
+  [200, 80],
+  [300, 70],
+  [400, 60],
+  [500, 50],
+  [600, 40],
+  [700, 30],
+  [800, 20],
+  [900, 10],
+  [950, 5]
+];
+var CORE_PALETTES = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "neutral",
+  "neutral-variant"
+];
 function buildTailwind(ctx, options) {
   const { prefix, mergedColorsLight, hexCustomColors } = ctx;
   const lines = [];
@@ -1085,6 +1127,7 @@ function builder(hexSource, {
     toFigmaVariables: () => buildFigmaVariables(ctx),
     toFigmaTokens: () => buildFigmaTokens(ctx),
     toTailwind: (options) => buildTailwind(ctx, options),
+    toShadcn: () => buildShadcn(ctx),
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
@@ -1100,6 +1143,31 @@ var customColorSchema = z.array(
     blend: z.boolean().default(DEFAULT_BLEND)
   })
 );
+function writeFigmaTokens(theme, outputDir) {
+  fs.mkdirSync(outputDir, { recursive: true });
+  for (const [filename, content] of Object.entries(theme.toFigmaTokens())) {
+    const filePath = path.join(outputDir, filename);
+    fs.writeFileSync(filePath, JSON.stringify(content, null, 2) + "\n");
+    console.error(`wrote ${filePath}`);
+  }
+}
+function writeOutput(theme, opts) {
+  const json = (value) => JSON.stringify(value, null, 2) + "\n";
+  switch (opts.format) {
+    case "css":
+      return process.stdout.write(theme.toCss());
+    case "tailwind":
+      return process.stdout.write(theme.toTailwind({ shadcn: opts.shadcn }));
+    case "shadcn":
+      return process.stdout.write(json(theme.toShadcn()));
+    case "flutter":
+      return process.stdout.write(theme.toFlutter());
+    case "figma":
+      return writeFigmaTokens(theme, opts.output ?? "material-theme");
+    default:
+      return process.stdout.write(json(theme.toJson()));
+  }
+}
 var program = new Command();
 program.name("material-theme-builder").description("Generate a color theme from a source color").argument("<source>", "Source color in hex format (e.g. #6750A4)").addOption(
   new Option("--scheme <name>", "Color scheme variant").choices(schemeNames).default(DEFAULT_SCHEME)
@@ -1113,16 +1181,22 @@ program.name("material-theme-builder").description("Generate a color theme from
   `Custom colors as JSON array (e.g. '[{"name":"brand","hex":"#FF5733","blend":true}]')`
 ).option(
   "--format <type>",
-  "Output format: json, css, figma, tailwind, or flutter",
+  "Output format: json, css, figma, tailwind, shadcn, or flutter",
   "figma"
 ).option("--output <dir>", "Output directory (required for figma format)").option(
   "--shadcn",
-  "Append shadcn CSS variable remapping (with --format tailwind)"
+  "Append the shadcn var() alias block to --format tailwind (for concrete values, use --format shadcn)"
 ).option(
   "--prefix <string>",
   "CSS variable prefix (e.g. md \u2192 --md-sys-color-*, --md-ref-palette-*)",
   DEFAULT_PREFIX
 ).action((source, opts) => {
+  if (opts.shadcn && opts.format !== "tailwind") {
+    console.error(
+      "Error: --shadcn only applies to --format tailwind. For concrete color values, use --format shadcn."
+    );
+    process.exit(1);
+  }
   let customColors = [];
   if (opts.customColors) {
     const result2 = customColorSchema.safeParse(JSON.parse(opts.customColors));
@@ -1144,23 +1218,6 @@ program.name("material-theme-builder").description("Generate a color theme from
     customColors,
     prefix: opts.prefix
   });
-  if (opts.format === "css") {
-    process.stdout.write(result.toCss());
-  } else if (opts.format === "tailwind") {
-    process.stdout.write(result.toTailwind({ shadcn: opts.shadcn }));
-  } else if (opts.format === "flutter") {
-    process.stdout.write(result.toFlutter());
-  } else if (opts.format === "figma") {
-    const outputDir = opts.output ?? "material-theme";
-    fs.mkdirSync(outputDir, { recursive: true });
-    const files = result.toFigmaTokens();
-    for (const [filename, content] of Object.entries(files)) {
-      const filePath = path.join(outputDir, filename);
-      fs.writeFileSync(filePath, JSON.stringify(content, null, 2) + "\n");
-      console.error(`wrote ${filePath}`);
-    }
-  } else {
-    process.stdout.write(JSON.stringify(result.toJson(), null, 2) + "\n");
-  }
+  writeOutput(result, opts);
 });
 program.parse();

package/dist/index.d.ts

@@ -1,5 +1,32 @@
 import { CustomColor, TonalPalette } from '@material/material-color-utilities';
-export { ExportButton, Mcu, useMcu } from './react.js';
+
+/**
+ * shadcn CSS variable → M3 sys-color token mapping.
+ *
+ * The single source of truth for which M3 token backs which shadcn variable:
+ * `toShadcn()` reads it to emit concrete values, `toTailwind({ shadcn: true })`
+ * reads it to emit `var()` aliases. Neither can name a variable the other
+ * doesn't.
+ *
+ * Token names are kebab-case (the CSS spelling); the camelCase spelling the
+ * scheme objects use is derived from them here, in one place.
+ *
+ * @see https://ui.shadcn.com/docs/theming#list-of-variables
+ */
+declare const SHADCN_MAPPING: readonly [readonly ["--background", "surface"], readonly ["--foreground", "on-surface"], readonly ["--card", "surface-container-low"], readonly ["--card-foreground", "on-surface"], readonly ["--popover", "surface-container-high"], readonly ["--popover-foreground", "on-surface"], readonly ["--primary", "primary"], readonly ["--primary-foreground", "on-primary"], readonly ["--secondary", "secondary-container"], readonly ["--secondary-foreground", "on-secondary-container"], readonly ["--muted", "surface-container-highest"], readonly ["--muted-foreground", "on-surface-variant"], readonly ["--accent", "secondary-container"], readonly ["--accent-foreground", "on-secondary-container"], readonly ["--destructive", "error"], readonly ["--border", "outline-variant"], readonly ["--input", "outline"], readonly ["--ring", "primary"], readonly ["--chart-1", "primary-fixed"], readonly ["--chart-2", "secondary-fixed"], readonly ["--chart-3", "tertiary-fixed"], readonly ["--chart-4", "primary-fixed-dim"], readonly ["--chart-5", "secondary-fixed-dim"], readonly ["--sidebar", "surface-container-low"], readonly ["--sidebar-foreground", "on-surface"], readonly ["--sidebar-primary", "primary"], readonly ["--sidebar-primary-foreground", "on-primary"], readonly ["--sidebar-accent", "secondary-container"], readonly ["--sidebar-accent-foreground", "on-secondary-container"], readonly ["--sidebar-border", "outline-variant"], readonly ["--sidebar-ring", "primary"]];
+type StripDashes<T extends string> = T extends `--${infer Bare}` ? Bare : never;
+/** A bare shadcn color variable name, e.g. `primary` or `chart-1`. */
+type ShadcnVarName = StripDashes<(typeof SHADCN_MAPPING)[number][0]>;
+/**
+ * Concrete shadcn colors, split by mode.
+ *
+ * Shaped exactly like a shadcn registry item's `cssVars` field, so it can be
+ * assigned there without rewriting keys or values.
+ */
+type ShadcnTheme = {
+    light: Record<ShadcnVarName, string>;
+    dark: Record<ShadcnVarName, string>;
+};
 
 /** DTCG color value (direct, non-alias) */
 type DtcgColorValue = {
@@ -51,8 +78,8 @@ type HexCustomColor = Omit<CustomColor, "value"> & {
 /** Available Material You color scheme variants. */
 declare const schemeNames: readonly ["tonalSpot", "monochrome", "neutral", "vibrant", "expressive", "fidelity", "content"];
 type SchemeName = (typeof schemeNames)[number];
-/** Configuration for the Material Color Utilities builder. */
-type McuConfig = {
+/** Configuration for the Material Theme Builder. */
+type MtbConfig = {
     /** Source color in hex format (e.g., "#6750A4") used to generate the color scheme */
     source: string;
     /** Color scheme variant. Default: "tonalSpot" */
@@ -92,6 +119,11 @@ type McuConfig = {
      */
     prefix?: string;
 };
+/**
+ * @deprecated Renamed `MtbConfig` — same shape. This alias will be removed in
+ * the next major.
+ */
+type McuConfig = MtbConfig;
 /**
  * Build a Material You color theme from a hex source color.
  *
@@ -105,7 +137,7 @@ type McuConfig = {
  * const json = theme.toJson();
  * ```
  */
-declare function builder(hexSource: McuConfig["source"], { scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, customColors: hexCustomColors, prefix, }?: Omit<McuConfig, "source">): {
+declare function builder(hexSource: MtbConfig["source"], { scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, customColors: hexCustomColors, prefix, }?: Omit<MtbConfig, "source">): {
     toCss: () => string;
     toJson: () => {
         seed: string;
@@ -145,6 +177,7 @@ declare function builder(hexSource: McuConfig["source"], { scheme, contrast, pri
         };
     };
     toTailwind: (options?: TailwindOptions) => string;
+    toShadcn: () => ShadcnTheme;
     toFlutter: () => string;
     mergedColorsLight: {
         [x: string]: number;
@@ -162,4 +195,4 @@ declare function builder(hexSource: McuConfig["source"], { scheme, contrast, pri
     };
 };
 
-export { builder };
+export { type McuConfig, type MtbConfig, type ShadcnTheme, type ShadcnVarName, builder };

package/dist/index.js

@@ -586,29 +586,8 @@ function buildJson(ctx) {
   };
 }
 
-// src/lib/builder.tailwind.ts
-import { kebabCase as kebabCase3 } from "lodash-es";
-var SHADE_TO_TONE = [
-  [50, 95],
-  [100, 90],
-  [200, 80],
-  [300, 70],
-  [400, 60],
-  [500, 50],
-  [600, 40],
-  [700, 30],
-  [800, 20],
-  [900, 10],
-  [950, 5]
-];
-var CORE_PALETTES = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "error",
-  "neutral",
-  "neutral-variant"
-];
+// src/lib/builder.shadcn.ts
+import { camelCase } from "lodash-es";
 var SHADCN_MAPPING = [
   ["--background", "surface"],
   ["--foreground", "on-surface"],
@@ -642,6 +621,69 @@ var SHADCN_MAPPING = [
   ["--sidebar-border", "outline-variant"],
   ["--sidebar-ring", "primary"]
 ];
+function srgbToLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function round(n) {
+  return String(Number(n.toFixed(3)));
+}
+function argbToOklch(argb) {
+  const r = srgbToLinear((argb >> 16 & 255) / 255);
+  const g = srgbToLinear((argb >> 8 & 255) / 255);
+  const b = srgbToLinear((argb & 255) / 255);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const chroma = Math.hypot(a, bb);
+  const hue = Number(chroma.toFixed(3)) === 0 ? 0 : (Math.atan2(bb, a) * 180 / Math.PI + 360) % 360;
+  return `oklch(${round(lightness)} ${round(chroma)} ${round(hue)})`;
+}
+function toShadcnVars(mergedColors) {
+  const entries = SHADCN_MAPPING.map(([cssVar, m3Token]) => {
+    const argb = mergedColors[camelCase(m3Token)];
+    if (argb === void 0) {
+      throw new Error(
+        `M3 token '${m3Token}' is missing from the scheme, needed by '${cssVar}'. This is likely a bug in the implementation.`
+      );
+    }
+    return [cssVar.slice(2), argbToOklch(argb)];
+  });
+  return Object.fromEntries(entries);
+}
+function buildShadcn(ctx) {
+  const { mergedColorsLight, mergedColorsDark } = ctx;
+  return {
+    light: toShadcnVars(mergedColorsLight),
+    dark: toShadcnVars(mergedColorsDark)
+  };
+}
+
+// src/lib/builder.tailwind.ts
+import { kebabCase as kebabCase3 } from "lodash-es";
+var SHADE_TO_TONE = [
+  [50, 95],
+  [100, 90],
+  [200, 80],
+  [300, 70],
+  [400, 60],
+  [500, 50],
+  [600, 40],
+  [700, 30],
+  [800, 20],
+  [900, 10],
+  [950, 5]
+];
+var CORE_PALETTES = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "neutral",
+  "neutral-variant"
+];
 function buildTailwind(ctx, options) {
   const { prefix, mergedColorsLight, hexCustomColors } = ctx;
   const lines = [];
@@ -1068,18 +1110,13 @@ function builder(hexSource, {
     toFigmaVariables: () => buildFigmaVariables(ctx),
     toFigmaTokens: () => buildFigmaTokens(ctx),
     toTailwind: (options) => buildTailwind(ctx, options),
+    toShadcn: () => buildShadcn(ctx),
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
     allPalettes
   };
 }
-
-// src/index.ts
-import { ExportButton, Mcu, useMcu } from "./react.js";
 export {
-  ExportButton,
-  Mcu,
-  builder,
-  useMcu
+  builder
 };

package/dist/react.d.ts

@@ -62,8 +62,8 @@ type HexCustomColor = Omit<CustomColor, "value"> & {
 /** Available Material You color scheme variants. */
 declare const schemeNames: readonly ["tonalSpot", "monochrome", "neutral", "vibrant", "expressive", "fidelity", "content"];
 type SchemeName = (typeof schemeNames)[number];
-/** Configuration for the Material Color Utilities builder. */
-type McuConfig = {
+/** Configuration for the Material Theme Builder. */
+type MtbConfig = {
     /** Source color in hex format (e.g., "#6750A4") used to generate the color scheme */
     source: string;
     /** Color scheme variant. Default: "tonalSpot" */
@@ -166,7 +166,7 @@ type TokenName = keyof typeof tokenDescriptions;
 
 interface ExportButtonProps {
     /** Current theme configuration used to generate the exported tokens. */
-    config: McuConfig;
+    config: MtbConfig;
 }
 /**
  * FAB that exports the current theme as Figma DTCG token JSON files.
@@ -176,20 +176,30 @@ declare function ExportButton({ config }: ExportButtonProps): react_jsx_runtime.
 /**
  * Root component that generates and injects a Material You color theme into the page.
  */
-declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, prefix, children, }: McuConfig & {
+declare function Mtb({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, prefix, children, }: MtbConfig & {
     /** Content to render inside the themed scope. */
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Renamed `Mtb` — same component, same props. This alias will be
+ * removed in the next major.
+ */
+declare const Mcu: typeof Mtb;
 
 type Api = {
-    initials: McuConfig;
-    mcuConfig: McuConfig;
-    setMcuConfig: (config: McuConfig) => void;
+    initials: MtbConfig;
+    mcuConfig: MtbConfig;
+    setMcuConfig: (config: MtbConfig) => void;
     getMcuColor: (colorName: TokenName, theme?: string) => string;
     allPalettes: Record<string, TonalPalette>;
     figmaTokens: FigmaTokens;
     figmaVariables: FigmaVariable[];
 };
+declare const useMtb: () => Api;
+/**
+ * @deprecated Renamed `useMtb` — same hook, same return value. This alias will
+ * be removed in the next major.
+ */
 declare const useMcu: () => Api;
 
-export { ExportButton, Mcu, useMcu };
+export { ExportButton, Mcu, Mtb, useMcu, useMtb };

package/dist/react.js

@@ -3906,29 +3906,8 @@ function buildJson(ctx) {
   };
 }
 
-// src/lib/builder.tailwind.ts
-import { kebabCase as kebabCase3 } from "lodash-es";
-var SHADE_TO_TONE = [
-  [50, 95],
-  [100, 90],
-  [200, 80],
-  [300, 70],
-  [400, 60],
-  [500, 50],
-  [600, 40],
-  [700, 30],
-  [800, 20],
-  [900, 10],
-  [950, 5]
-];
-var CORE_PALETTES = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "error",
-  "neutral",
-  "neutral-variant"
-];
+// src/lib/builder.shadcn.ts
+import { camelCase } from "lodash-es";
 var SHADCN_MAPPING = [
   ["--background", "surface"],
   ["--foreground", "on-surface"],
@@ -3962,6 +3941,69 @@ var SHADCN_MAPPING = [
   ["--sidebar-border", "outline-variant"],
   ["--sidebar-ring", "primary"]
 ];
+function srgbToLinear(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function round(n) {
+  return String(Number(n.toFixed(3)));
+}
+function argbToOklch(argb) {
+  const r2 = srgbToLinear((argb >> 16 & 255) / 255);
+  const g = srgbToLinear((argb >> 8 & 255) / 255);
+  const b = srgbToLinear((argb & 255) / 255);
+  const l = Math.cbrt(0.4122214708 * r2 + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r2 + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r2 + 0.2817188376 * g + 0.6299787005 * b);
+  const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const chroma = Math.hypot(a, bb);
+  const hue = Number(chroma.toFixed(3)) === 0 ? 0 : (Math.atan2(bb, a) * 180 / Math.PI + 360) % 360;
+  return `oklch(${round(lightness)} ${round(chroma)} ${round(hue)})`;
+}
+function toShadcnVars(mergedColors) {
+  const entries = SHADCN_MAPPING.map(([cssVar, m3Token]) => {
+    const argb = mergedColors[camelCase(m3Token)];
+    if (argb === void 0) {
+      throw new Error(
+        `M3 token '${m3Token}' is missing from the scheme, needed by '${cssVar}'. This is likely a bug in the implementation.`
+      );
+    }
+    return [cssVar.slice(2), argbToOklch(argb)];
+  });
+  return Object.fromEntries(entries);
+}
+function buildShadcn(ctx) {
+  const { mergedColorsLight, mergedColorsDark } = ctx;
+  return {
+    light: toShadcnVars(mergedColorsLight),
+    dark: toShadcnVars(mergedColorsDark)
+  };
+}
+
+// src/lib/builder.tailwind.ts
+import { kebabCase as kebabCase3 } from "lodash-es";
+var SHADE_TO_TONE = [
+  [50, 95],
+  [100, 90],
+  [200, 80],
+  [300, 70],
+  [400, 60],
+  [500, 50],
+  [600, 40],
+  [700, 30],
+  [800, 20],
+  [900, 10],
+  [950, 5]
+];
+var CORE_PALETTES = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "neutral",
+  "neutral-variant"
+];
 function buildTailwind(ctx, options) {
   const { prefix, mergedColorsLight, hexCustomColors } = ctx;
   const lines = [];
@@ -4388,6 +4430,7 @@ function builder(hexSource, {
     toFigmaVariables: () => buildFigmaVariables(ctx),
     toFigmaTokens: () => buildFigmaTokens(ctx),
     toTailwind: (options) => buildTailwind(ctx, options),
+    toShadcn: () => buildShadcn(ctx),
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
@@ -4454,10 +4497,10 @@ function ExportButton({ config }) {
   );
 }
 
-// src/Mcu.tsx
+// src/Mtb.tsx
 import { useMemo as useMemo2 } from "react";
 
-// src/Mcu.context.tsx
+// src/Mtb.context.tsx
 import {
   hexFromArgb as hexFromArgb5
 } from "@material/material-color-utilities";
@@ -4477,10 +4520,10 @@ var createRequiredContext = () => {
   return [useCtx, Ctx.Provider, Ctx];
 };
 
-// src/Mcu.context.tsx
+// src/Mtb.context.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var [useMcu, Provider, McuContext] = createRequiredContext();
-var McuProvider = ({
+var [useMtb, Provider, MtbContext] = createRequiredContext();
+var MtbProvider = ({
   styleId,
   children,
   ...configProps
@@ -4545,12 +4588,13 @@ var McuProvider = ({
     children
   ] });
 };
+var useMcu = useMtb;
 
-// src/Mcu.tsx
+// src/Mtb.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var mcuStyleId = "mcu-styles";
 var DEFAULT_COLOR_MATCH = false;
-function Mcu({
+function Mtb({
   source,
   scheme = DEFAULT_SCHEME,
   contrast = DEFAULT_CONTRAST,
@@ -4595,10 +4639,13 @@ function Mcu({
       prefix
     ]
   );
-  return /* @__PURE__ */ jsx4(McuProvider, { ...config, styleId: mcuStyleId, children });
+  return /* @__PURE__ */ jsx4(MtbProvider, { ...config, styleId: mcuStyleId, children });
 }
+var Mcu = Mtb;
 export {
   ExportButton,
   Mcu,
-  useMcu
+  Mtb,
+  useMcu,
+  useMtb
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-theme-builder",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "m3 color-system for JS/TS ecosystem",
   "keywords": [
     "react",
@@ -12,6 +12,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
     "./tailwind.css": "./dist/tailwind.css"
   },
   "homepage": "https://github.com/abernier/material-theme-builder",