react-mcu 1.3.0 → 1.3.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CustomColor, TonalPalette } from '@material/material-color-utilities';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type HexCustomColor = Omit<CustomColor, "value"> & {
     hex: string;
@@ -34,39 +34,26 @@ type McuConfig = {
     colorMatch?: boolean;
     /**
      * Array of custom colors to include in the generated palette.
-     *
-     * @example
-     * ```ts
-     * customColors={[
-     *   { name: "brand", hex: "#FF5733", blend: true },
-     *   { name: "success", hex: "#28A745", blend: false }
-     * ]}
-     * ```
+     * Each custom color can be blended with the source color for harmonization.
      */
     customColors?: HexCustomColor[];
     /**
-     * When true, applies the contrast level to all colors including custom colors and tonal palette shades.
-     * When false (default), only core colors are affected by the contrast level.
+     * Apply contrast adjustment to tonal palette shades when true.
+     * When true, all tonal palette shades are adjusted based on the contrast level.
+     * When false (default), contrast adjustments only apply to core Material Design tokens.
      */
     contrastAllColors?: boolean;
     /**
-     * When true (default), tonal palette shades adapt to the theme (light/dark) with inverted tone values.
-     * In dark mode, high tones (light colors) map to low tones (dark colors) and vice versa.
-     * When false, shades remain the same across themes.
+     * Adapt tonal palette shades for dark mode.
+     * When true, tonal palette shades automatically invert for dark mode
+     * (high values become dark, low values become light).
+     * When false (default), tonal palette values remain constant across light/dark mode.
      */
     adaptiveShades?: boolean;
 };
 declare const schemeNames: readonly ["tonalSpot", "monochrome", "neutral", "vibrant", "expressive", "fidelity", "content"];
 type SchemeName = (typeof schemeNames)[number];
-declare const DEFAULT_SCHEME: SchemeName;
-declare const DEFAULT_CONTRAST = 0;
-declare const DEFAULT_CONTRAST_ALL_COLORS = false;
-declare const DEFAULT_ADAPTIVE_SHADES = false;
-declare const DEFAULT_BLEND = true;
-declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, contrastAllColors, adaptiveShades, children, }: McuConfig & {
-    children?: React.ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare const tokenNames: readonly ["background", "onBackground", "surface", "surfaceDim", "surfaceBright", "surfaceContainerLowest", "surfaceContainerLow", "surfaceContainer", "surfaceContainerHigh", "surfaceContainerHighest", "onSurface", "surfaceVariant", "onSurfaceVariant", "outline", "outlineVariant", "inverseSurface", "inverseOnSurface", "primary", "surfaceTint", "onPrimary", "primaryContainer", "onPrimaryContainer", "primaryFixed", "primaryFixedDim", "onPrimaryFixed", "onPrimaryFixedVariant", "inversePrimary", "secondary", "onSecondary", "secondaryContainer", "onSecondaryContainer", "secondaryFixed", "secondaryFixedDim", "onSecondaryFixed", "onSecondaryFixedVariant", "tertiary", "onTertiary", "tertiaryContainer", "onTertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "onTertiaryFixed", "onTertiaryFixedVariant", "error", "onError", "errorContainer", "onErrorContainer", "scrim", "shadow"];
+declare const tokenNames: readonly ["background", "error", "errorContainer", "inverseOnSurface", "inversePrimary", "inverseSurface", "onBackground", "onError", "onErrorContainer", "onPrimary", "onPrimaryContainer", "onPrimaryFixed", "onPrimaryFixedVariant", "onSecondary", "onSecondaryContainer", "onSecondaryFixed", "onSecondaryFixedVariant", "onSurface", "onSurfaceVariant", "onTertiary", "onTertiaryContainer", "onTertiaryFixed", "onTertiaryFixedVariant", "outline", "outlineVariant", "primary", "primaryContainer", "primaryFixed", "primaryFixedDim", "scrim", "secondary", "secondaryContainer", "secondaryFixed", "secondaryFixedDim", "shadow", "surface", "surfaceBright", "surfaceContainer", "surfaceContainerHigh", "surfaceContainerHighest", "surfaceContainerLow", "surfaceContainerLowest", "surfaceDim", "surfaceTint", "surfaceVariant", "tertiary", "tertiaryContainer", "tertiaryFixed", "tertiaryFixedDim"];
 type TokenName = (typeof tokenNames)[number];
 declare function builder(hexSource: McuConfig["source"], { scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, customColors: hexCustomColors, contrastAllColors, adaptiveShades, }?: Omit<McuConfig, "source">): {
     toCss(): string;
@@ -162,6 +149,10 @@ declare function builder(hexSource: McuConfig["source"], { scheme, contrast, pri
     };
 };
 
+declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, contrastAllColors, adaptiveShades, children, }: McuConfig & {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
 type Api = {
     initials: McuConfig;
     setMcuConfig: (config: McuConfig) => void;
@@ -170,4 +161,4 @@ type Api = {
 };
 declare const useMcu: () => Api;
 
-export { DEFAULT_ADAPTIVE_SHADES, DEFAULT_BLEND, DEFAULT_CONTRAST, DEFAULT_CONTRAST_ALL_COLORS, DEFAULT_SCHEME, Mcu, builder, schemeNames, useMcu };
+export { Mcu, builder, useMcu };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-// src/Mcu.tsx
+// src/lib/builder.ts
 import {
   argbFromHex,
   Blend,
@@ -9,7 +9,7 @@ import {
   DynamicScheme,
   greenFromArgb,
   Hct,
-  hexFromArgb as hexFromArgb2,
+  hexFromArgb,
   MaterialDynamicColors,
   redFromArgb,
   SchemeContent,
@@ -22,85 +22,6 @@ import {
   TonalPalette
 } from "@material/material-color-utilities";
 import { kebabCase, startCase, upperFirst } from "lodash-es";
-import { useMemo as useMemo2 } from "react";
-
-// src/Mcu.context.tsx
-import {
-  hexFromArgb
-} from "@material/material-color-utilities";
-import React, {
-  useCallback,
-  useInsertionEffect,
-  useMemo,
-  useState
-} from "react";
-
-// src/lib/createRequiredContext.ts
-import { createContext, useContext } from "react";
-var createRequiredContext = () => {
-  const Ctx = createContext(null);
-  const useCtx = () => {
-    const contextValue = useContext(Ctx);
-    if (contextValue === null) {
-      throw new Error("Context value is null");
-    }
-    return contextValue;
-  };
-  return [useCtx, Ctx.Provider, Ctx];
-};
-
-// src/Mcu.context.tsx
-import { jsx } from "react/jsx-runtime";
-var [useMcu, Provider, McuContext] = createRequiredContext();
-var McuProvider = ({
-  styleId,
-  children,
-  ...configProps
-}) => {
-  const [initials] = useState(() => configProps);
-  const [mcuConfig, setMcuConfig] = useState(initials);
-  const configKey = JSON.stringify(configProps);
-  React.useEffect(() => {
-    setMcuConfig(configProps);
-  }, [configKey]);
-  const { css, mergedColorsLight, mergedColorsDark, allPalettes } = useMemo(() => {
-    const { toCss, ...rest } = builder(mcuConfig.source, mcuConfig);
-    return { css: toCss(), ...rest };
-  }, [mcuConfig]);
-  useInsertionEffect(() => {
-    let tag = document.getElementById(styleId);
-    if (!tag) {
-      tag = document.createElement("style");
-      tag.id = styleId;
-      document.head.appendChild(tag);
-    }
-    tag.textContent = css;
-  }, [css, styleId]);
-  const getMcuColor = useCallback(
-    (colorName, theme) => {
-      const mergedColors = theme === "light" ? mergedColorsLight : mergedColorsDark;
-      const colorValue = mergedColors[colorName];
-      if (colorValue === void 0) {
-        throw new Error(`Unknown MCU token '${colorName}'`);
-      }
-      return hexFromArgb(colorValue);
-    },
-    [mergedColorsDark, mergedColorsLight]
-  );
-  const value = useMemo(
-    () => ({
-      initials,
-      setMcuConfig,
-      getMcuColor,
-      allPalettes
-    }),
-    [getMcuColor, initials, allPalettes]
-  );
-  return /* @__PURE__ */ jsx(Provider, { value, children });
-};
-
-// src/Mcu.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
 function adjustToneForContrast(baseTone, contrastLevel, adjustmentFactor = DEFAULT_CONTRAST_ADJUSTMENT_FACTOR) {
   if (contrastLevel === 0) return baseTone;
   const distanceToCenter = baseTone - 50;
@@ -108,15 +29,6 @@ function adjustToneForContrast(baseTone, contrastLevel, adjustmentFactor = DEFAU
   const adjustedTone = baseTone + delta;
   return Math.max(0, Math.min(100, adjustedTone));
 }
-var schemeNames = [
-  "tonalSpot",
-  "monochrome",
-  "neutral",
-  "vibrant",
-  "expressive",
-  "fidelity",
-  "content"
-];
 var schemesMap = {
   tonalSpot: SchemeTonalSpot,
   monochrome: SchemeMonochrome,
@@ -128,7 +40,6 @@ var schemesMap = {
 };
 var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
-var DEFAULT_COLOR_MATCH = false;
 var DEFAULT_CUSTOM_COLORS = [];
 var DEFAULT_CONTRAST_ALL_COLORS = false;
 var DEFAULT_ADAPTIVE_SHADES = false;
@@ -166,116 +77,64 @@ var Variant = {
   FRUIT_SALAD: 8
 };
 var schemeToVariant = {
-  tonalSpot: Variant.TONAL_SPOT,
   monochrome: Variant.MONOCHROME,
   neutral: Variant.NEUTRAL,
+  tonalSpot: Variant.TONAL_SPOT,
   vibrant: Variant.VIBRANT,
   expressive: Variant.EXPRESSIVE,
   fidelity: Variant.FIDELITY,
   content: Variant.CONTENT
 };
-var mcuStyleId = "mcu-styles";
-function Mcu({
-  source,
-  scheme = DEFAULT_SCHEME,
-  contrast = DEFAULT_CONTRAST,
-  primary,
-  secondary,
-  tertiary,
-  neutral,
-  neutralVariant,
-  error,
-  colorMatch = DEFAULT_COLOR_MATCH,
-  customColors = DEFAULT_CUSTOM_COLORS,
-  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS,
-  adaptiveShades = DEFAULT_ADAPTIVE_SHADES,
-  children
-}) {
-  const config = useMemo2(
-    () => ({
-      source,
-      scheme,
-      contrast,
-      primary,
-      secondary,
-      tertiary,
-      neutral,
-      neutralVariant,
-      error,
-      colorMatch,
-      customColors,
-      // extras features
-      contrastAllColors,
-      adaptiveShades
-    }),
-    [
-      contrast,
-      customColors,
-      scheme,
-      source,
-      primary,
-      secondary,
-      tertiary,
-      neutral,
-      neutralVariant,
-      error,
-      colorMatch,
-      contrastAllColors,
-      adaptiveShades
-    ]
-  );
-  return /* @__PURE__ */ jsx2(McuProvider, { ...config, styleId: mcuStyleId, children });
-}
 var tokenNames = [
   "background",
+  "error",
+  "errorContainer",
+  "inverseOnSurface",
+  "inversePrimary",
+  "inverseSurface",
   "onBackground",
-  "surface",
-  "surfaceDim",
-  "surfaceBright",
-  "surfaceContainerLowest",
-  "surfaceContainerLow",
-  "surfaceContainer",
-  "surfaceContainerHigh",
-  "surfaceContainerHighest",
+  "onError",
+  "onErrorContainer",
+  "onPrimary",
+  "onPrimaryContainer",
+  "onPrimaryFixed",
+  "onPrimaryFixedVariant",
+  "onSecondary",
+  "onSecondaryContainer",
+  "onSecondaryFixed",
+  "onSecondaryFixedVariant",
   "onSurface",
-  "surfaceVariant",
   "onSurfaceVariant",
+  "onTertiary",
+  "onTertiaryContainer",
+  "onTertiaryFixed",
+  "onTertiaryFixedVariant",
   "outline",
   "outlineVariant",
-  "inverseSurface",
-  "inverseOnSurface",
   "primary",
-  "surfaceTint",
-  "onPrimary",
   "primaryContainer",
-  "onPrimaryContainer",
   "primaryFixed",
   "primaryFixedDim",
-  "onPrimaryFixed",
-  "onPrimaryFixedVariant",
-  "inversePrimary",
+  "scrim",
   "secondary",
-  "onSecondary",
   "secondaryContainer",
-  "onSecondaryContainer",
   "secondaryFixed",
   "secondaryFixedDim",
-  "onSecondaryFixed",
-  "onSecondaryFixedVariant",
+  "shadow",
+  "surface",
+  "surfaceBright",
+  "surfaceContainer",
+  "surfaceContainerHigh",
+  "surfaceContainerHighest",
+  "surfaceContainerLow",
+  "surfaceContainerLowest",
+  "surfaceDim",
+  "surfaceTint",
+  "surfaceVariant",
   "tertiary",
-  "onTertiary",
   "tertiaryContainer",
-  "onTertiaryContainer",
   "tertiaryFixed",
-  "tertiaryFixedDim",
-  "onTertiaryFixed",
-  "onTertiaryFixedVariant",
-  "error",
-  "onError",
-  "errorContainer",
-  "onErrorContainer",
-  "scrim",
-  "shadow"
+  "tertiaryFixedDim"
 ];
 function toRecord(arr, getEntry) {
   return Object.fromEntries(arr.map(getEntry));
@@ -489,7 +348,7 @@ function builder(hexSource, {
     toCss() {
       function cssVar(colorName, colorValue) {
         const name = `--mcu-${kebabCase(colorName)}`;
-        const value = hexFromArgb2(colorValue);
+        const value = hexFromArgb(colorValue);
         return `${name}:${value};`;
       }
       function toCssVars(mergedColors) {
@@ -611,7 +470,7 @@ function builder(hexSource, {
           for (const tokenName of fixtureTokenOrder) {
             const dynamicColor = MaterialDynamicColors[tokenName];
             const useScheme = backgroundScheme && (tokenName === "background" || tokenName === "onBackground") ? backgroundScheme : scheme2;
-            colors[tokenName] = hexFromArgb2(
+            colors[tokenName] = hexFromArgb(
               dynamicColor.getArgb(useScheme)
             ).toUpperCase();
           }
@@ -669,7 +528,7 @@ function builder(hexSource, {
           const palette = rawPalettes[name];
           const tones = {};
           for (const tone of STANDARD_TONES) {
-            tones[tone.toString()] = hexFromArgb2(
+            tones[tone.toString()] = hexFromArgb(
               palette.tone(tone)
             ).toUpperCase();
           }
@@ -727,7 +586,7 @@ function builder(hexSource, {
             blueFromArgb(argb) / 255
           ],
           alpha: 1,
-          hex: hexFromArgb2(argb).toUpperCase()
+          hex: hexFromArgb(argb).toUpperCase()
         };
       }
       function figmaToken(argb) {
@@ -788,14 +647,142 @@ function builder(hexSource, {
     allPalettes
   };
 }
+
+// src/Mcu.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/Mcu.context.tsx
+import {
+  hexFromArgb as hexFromArgb2
+} from "@material/material-color-utilities";
+import React, {
+  useCallback,
+  useInsertionEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/lib/createRequiredContext.ts
+import { createContext, useContext } from "react";
+var createRequiredContext = () => {
+  const Ctx = createContext(null);
+  const useCtx = () => {
+    const contextValue = useContext(Ctx);
+    if (contextValue === null) {
+      throw new Error("Context value is null");
+    }
+    return contextValue;
+  };
+  return [useCtx, Ctx.Provider, Ctx];
+};
+
+// src/Mcu.context.tsx
+import { jsx } from "react/jsx-runtime";
+var [useMcu, Provider, McuContext] = createRequiredContext();
+var McuProvider = ({
+  styleId,
+  children,
+  ...configProps
+}) => {
+  const [initials] = useState(() => configProps);
+  const [mcuConfig, setMcuConfig] = useState(initials);
+  const configKey = JSON.stringify(configProps);
+  React.useEffect(() => {
+    setMcuConfig(configProps);
+  }, [configKey]);
+  const { css, mergedColorsLight, mergedColorsDark, allPalettes } = useMemo(() => {
+    const { toCss, ...rest } = builder(mcuConfig.source, mcuConfig);
+    return { css: toCss(), ...rest };
+  }, [mcuConfig]);
+  useInsertionEffect(() => {
+    let tag = document.getElementById(styleId);
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = styleId;
+      document.head.appendChild(tag);
+    }
+    tag.textContent = css;
+  }, [css, styleId]);
+  const getMcuColor = useCallback(
+    (colorName, theme) => {
+      const mergedColors = theme === "light" ? mergedColorsLight : mergedColorsDark;
+      const colorValue = mergedColors[colorName];
+      if (colorValue === void 0) {
+        throw new Error(`Unknown MCU token '${colorName}'`);
+      }
+      return hexFromArgb2(colorValue);
+    },
+    [mergedColorsDark, mergedColorsLight]
+  );
+  const value = useMemo(
+    () => ({
+      initials,
+      setMcuConfig,
+      getMcuColor,
+      allPalettes
+    }),
+    [getMcuColor, initials, allPalettes]
+  );
+  return /* @__PURE__ */ jsx(Provider, { value, children });
+};
+
+// src/Mcu.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var mcuStyleId = "mcu-styles";
+var DEFAULT_COLOR_MATCH = false;
+function Mcu({
+  source,
+  scheme = DEFAULT_SCHEME,
+  contrast = DEFAULT_CONTRAST,
+  primary,
+  secondary,
+  tertiary,
+  neutral,
+  neutralVariant,
+  error,
+  colorMatch = DEFAULT_COLOR_MATCH,
+  customColors = DEFAULT_CUSTOM_COLORS,
+  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS,
+  adaptiveShades = DEFAULT_ADAPTIVE_SHADES,
+  children
+}) {
+  const config = useMemo2(
+    () => ({
+      source,
+      scheme,
+      contrast,
+      primary,
+      secondary,
+      tertiary,
+      neutral,
+      neutralVariant,
+      error,
+      colorMatch,
+      customColors,
+      // extras features
+      contrastAllColors,
+      adaptiveShades
+    }),
+    [
+      contrast,
+      customColors,
+      scheme,
+      source,
+      primary,
+      secondary,
+      tertiary,
+      neutral,
+      neutralVariant,
+      error,
+      colorMatch,
+      contrastAllColors,
+      adaptiveShades
+    ]
+  );
+  return /* @__PURE__ */ jsx2(McuProvider, { ...config, styleId: mcuStyleId, children });
+}
 export {
-  DEFAULT_ADAPTIVE_SHADES,
-  DEFAULT_BLEND,
-  DEFAULT_CONTRAST,
-  DEFAULT_CONTRAST_ALL_COLORS,
-  DEFAULT_SCHEME,
   Mcu,
   builder,
-  schemeNames,
   useMcu
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A React component library",
   "keywords": [
     "react",

package/src/cli.ts

@@ -20,7 +20,7 @@ import {
   DEFAULT_CONTRAST_ALL_COLORS,
   DEFAULT_SCHEME,
   schemeNames,
-} from "react-mcu";
+} from "./lib/builder";
 
 const program = new Command();