@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/core.mjs

@@ -2,10 +2,11 @@
 import * as React11 from 'react';
 import { createContext, useState, useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
+import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { LazyMotion, domMax, m, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
+import { Slot } from '@radix-ui/react-slot';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -151,66 +152,110 @@ function resolveMode(mode) {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function generateM3Theme(sourceColorHex, mode = "light") {
-  const sourceColor = argbFromHex(sourceColorHex);
-  const theme = themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => hexFromArgb(palette.tone(t));
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new SchemeExpressive(hct, isDark, contrastLevel, spec);
+  }
+}
+function argbFromHex(hex) {
+  const sanitized = hex.replace(/^#/, "");
+  const r = Number.parseInt(sanitized.substring(0, 2), 16);
+  const g = Number.parseInt(sanitized.substring(2, 4), 16);
+  const b = Number.parseInt(sanitized.substring(4, 6), 16);
+  return (4278190080 | r << 16 | g << 8 | b) >>> 0;
+}
+function generateM3Theme(sourceColorHex, mode = "light", options = {}) {
+  const { variant = "expressive", contrastLevel = 0 } = options;
+  const isDark = mode === "dark";
+  const scheme = createDynamicScheme(
+    sourceColorHex,
+    isDark,
+    variant,
+    contrastLevel
+  );
+  const hex = (argb) => hexFromArgb(argb);
   return {
-    primary: hexFromArgb(scheme.primary),
-    onPrimary: hexFromArgb(scheme.onPrimary),
-    primaryContainer: hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: hexFromArgb(scheme.secondary),
-    onSecondary: hexFromArgb(scheme.onSecondary),
-    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: hexFromArgb(scheme.tertiary),
-    onTertiary: hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: hexFromArgb(scheme.error),
-    onError: hexFromArgb(scheme.onError),
-    errorContainer: hexFromArgb(scheme.errorContainer),
-    onErrorContainer: hexFromArgb(scheme.onErrorContainer),
-    surface: hexFromArgb(scheme.surface),
-    onSurface: hexFromArgb(scheme.onSurface),
-    surfaceVariant: hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: hexFromArgb(scheme.primary),
-    // Surface container roles from neutral palette tones
-    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
-    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
-    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
-    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
-    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
-    inverseSurface: hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
-    background: hexFromArgb(scheme.background),
-    onBackground: hexFromArgb(scheme.onBackground),
-    outline: hexFromArgb(scheme.outline),
-    outlineVariant: hexFromArgb(scheme.outlineVariant),
-    shadow: hexFromArgb(scheme.shadow),
-    scrim: hexFromArgb(scheme.scrim)
+    // Primary
+    primary: hex(scheme.primary),
+    onPrimary: hex(scheme.onPrimary),
+    primaryContainer: hex(scheme.primaryContainer),
+    onPrimaryContainer: hex(scheme.onPrimaryContainer),
+    inversePrimary: hex(scheme.inversePrimary),
+    primaryFixed: hex(scheme.primaryFixed),
+    primaryFixedDim: hex(scheme.primaryFixedDim),
+    onPrimaryFixed: hex(scheme.onPrimaryFixed),
+    onPrimaryFixedVariant: hex(scheme.onPrimaryFixedVariant),
+    primaryDim: hex(scheme.primaryDim),
+    // Secondary
+    secondary: hex(scheme.secondary),
+    onSecondary: hex(scheme.onSecondary),
+    secondaryContainer: hex(scheme.secondaryContainer),
+    onSecondaryContainer: hex(scheme.onSecondaryContainer),
+    secondaryFixed: hex(scheme.secondaryFixed),
+    secondaryFixedDim: hex(scheme.secondaryFixedDim),
+    onSecondaryFixed: hex(scheme.onSecondaryFixed),
+    onSecondaryFixedVariant: hex(scheme.onSecondaryFixedVariant),
+    secondaryDim: hex(scheme.secondaryDim),
+    // Tertiary
+    tertiary: hex(scheme.tertiary),
+    onTertiary: hex(scheme.onTertiary),
+    tertiaryContainer: hex(scheme.tertiaryContainer),
+    onTertiaryContainer: hex(scheme.onTertiaryContainer),
+    tertiaryFixed: hex(scheme.tertiaryFixed),
+    tertiaryFixedDim: hex(scheme.tertiaryFixedDim),
+    onTertiaryFixed: hex(scheme.onTertiaryFixed),
+    onTertiaryFixedVariant: hex(scheme.onTertiaryFixedVariant),
+    tertiaryDim: hex(scheme.tertiaryDim),
+    // Error
+    error: hex(scheme.error),
+    onError: hex(scheme.onError),
+    errorContainer: hex(scheme.errorContainer),
+    onErrorContainer: hex(scheme.onErrorContainer),
+    // Surface
+    surface: hex(scheme.surface),
+    onSurface: hex(scheme.onSurface),
+    surfaceVariant: hex(scheme.surfaceVariant),
+    onSurfaceVariant: hex(scheme.onSurfaceVariant),
+    surfaceTint: hex(scheme.surfaceTint),
+    surfaceDim: hex(scheme.surfaceDim),
+    surfaceBright: hex(scheme.surfaceBright),
+    surfaceContainerLowest: hex(scheme.surfaceContainerLowest),
+    surfaceContainerLow: hex(scheme.surfaceContainerLow),
+    surfaceContainer: hex(scheme.surfaceContainer),
+    surfaceContainerHigh: hex(scheme.surfaceContainerHigh),
+    surfaceContainerHighest: hex(scheme.surfaceContainerHighest),
+    // Inverse
+    inverseSurface: hex(scheme.inverseSurface),
+    inverseOnSurface: hex(scheme.inverseOnSurface),
+    // Background
+    background: hex(scheme.background),
+    onBackground: hex(scheme.onBackground),
+    // Outline
+    outline: hex(scheme.outline),
+    outlineVariant: hex(scheme.outlineVariant),
+    // Utility
+    shadow: hex(scheme.shadow),
+    scrim: hex(scheme.scrim)
   };
 }
-function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement, options = {}) {
   const resolved = resolveMode(mode);
-  const colors = generateM3Theme(sourceColorHex, resolved);
+  const colors = generateM3Theme(sourceColorHex, resolved, options);
   for (const [key, value] of Object.entries(colors)) {
     const kebabKey = key.replace(/[A-Z]/g, (m7) => `-${m7.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
@@ -1436,6 +1481,7 @@ var IconButtonComponent = React11.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -1451,6 +1497,7 @@ var IconButtonComponent = React11.forwardRef(
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
@@ -1512,7 +1559,87 @@ var IconButtonComponent = React11.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
+    const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsx(
+        m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: asChild ? React11.Children.only(children).props.children : children
+        }),
+        "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      SIZE_STYLES[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React11.Children.only(children);
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": isToggle ? isSelected : void 0,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || restProps.disabled,
+          onClick: handleClick,
+          onPointerDown,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          className: containerClassName
+        }, restProps), {
+          children: React11.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -1528,67 +1655,9 @@ var IconButtonComponent = React11.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsx(
-            m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: {
-                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
-                width: isCustomSize ? `${iconSize}px` : void 0,
-                height: isCustomSize ? `${iconSize}px` : void 0
-              },
-              children
-            }),
-            "content"
-          ) })
-        ]
+        children: innerContent
       })
     ) });
   }
@@ -2469,6 +2538,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -2477,6 +2548,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = useState(initialSourceColor);
   const [mode, setMode] = useState(defaultMode);
   const [isHydrated, setIsHydrated] = useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = useState("light");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemMode = () => {
+      setSystemMode(mediaQuery.matches ? "dark" : "light");
+    };
+    updateSystemMode();
+    mediaQuery.addEventListener("change", updateSystemMode);
+    return () => mediaQuery.removeEventListener("change", updateSystemMode);
+  }, []);
   useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -2488,25 +2570,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   useEffect(() => {
     if (!isHydrated) return;
-    applyTheme(sourceColor, mode);
+    applyTheme(sourceColor, effectiveMode, document.documentElement, {
+      variant,
+      contrastLevel
+    });
     if (persistToLocalStorage) {
       localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
-  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  useEffect(() => {
-    if (mode !== "system" || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyTheme(sourceColor, "system");
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [mode, sourceColor]);
-  const effectiveMode = resolveMode(mode);
+  }, [
+    sourceColor,
+    mode,
+    effectiveMode,
+    persistToLocalStorage,
+    isHydrated,
+    variant,
+    contrastLevel
+  ]);
   const themeValue = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;