npm - @bug-on/m3-expressive - Versions diffs - 1.1.0 → 1.2.0 - Mend

@bug-on/m3-expressive 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md +12 -0
package/dist/buttons.d.mts +2 -2
package/dist/buttons.d.ts +2 -2
package/dist/buttons.js +30 -1
package/dist/buttons.js.map +1 -1
package/dist/buttons.mjs +30 -1
package/dist/buttons.mjs.map +1 -1
package/dist/core-Bc5Wj_pc.d.ts +497 -0
package/dist/core-D4048_K5.d.mts +497 -0
package/dist/core.d.mts +6 -422
package/dist/core.d.ts +6 -422
package/dist/core.js +137 -68
package/dist/core.js.map +1 -1
package/dist/core.mjs +138 -69
package/dist/core.mjs.map +1 -1
package/dist/index.css +6 -1
package/dist/index.d.mts +65 -3
package/dist/index.d.ts +65 -3
package/dist/index.js +206 -86
package/dist/index.js.map +1 -1
package/dist/index.mjs +206 -87
package/dist/index.mjs.map +1 -1
package/dist/layout.js +29 -0
package/dist/layout.js.map +1 -1
package/dist/layout.mjs +29 -0
package/dist/layout.mjs.map +1 -1
package/dist/{md3-DFhj-NZj.d.mts → md3-Dty-Qcad.d.mts} +7 -1
package/dist/{md3-DFhj-NZj.d.ts → md3-Dty-Qcad.d.ts} +7 -1
package/dist/{split-button-trailing-uncheckable-BRPuTqi1.d.mts → split-button-trailing-uncheckable-BkPbiBo3.d.ts} +29 -1
package/dist/{split-button-trailing-uncheckable-CjOFCoyW.d.ts → split-button-trailing-uncheckable-D_PLPb-u.d.mts} +29 -1
package/package.json +4 -4

package/dist/core.d.ts CHANGED Viewed

@@ -1,422 +1,6 @@
-import * as React$1 from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ClassValue } from 'clsx';
-export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-DFhj-NZj.js';
-import { a as Typography, F as FontVariationAxes } from './typography-339RV6v7.js';
-/**
- * useMediaQuery — SSR-safe responsive hook.
- *
- * Prevents hydration mismatch by initializing with `false`.
- *
- * @example
- * ```tsx
- * const isMobile = useMediaQuery('(max-width: 768px)');
- * ```
- */
-declare function useMediaQuery(query: string): boolean;
-interface RippleOptions {
-    /** Ripple animation duration (ms). Default: 600 */
-    duration?: number;
-    /** Ripple color. Default: 'currentColor' */
-    color?: string;
-    /** Opacity. Default: 0.12 (MD3 standard) */
-    opacity?: number;
-    /** Disable ripple (e.g. when component is disabled) */
-    disabled?: boolean;
-}
-/**
- * useRipple — Material Design 3 Expressive Ripple Effect
- *
- * Pure DOM hook with zero external animation dependencies.
- * Note: Requires element to have `position: relative` and `overflow: hidden`.
- *
- * @example
- * ```tsx
- * const { rippleRef, onPointerDown } = useRipple();
- * <button ref={rippleRef} onPointerDown={onPointerDown}>Click me</button>
- * ```
- */
-declare function useRipple$1<T extends HTMLElement = HTMLElement>(options?: RippleOptions): {
-    rippleRef: React$1.RefObject<T | null>;
-    onPointerDown: (event: React.PointerEvent<T>) => void;
-};
-/**
- * MaterialSymbolsPreconnect
- *
- * Injects preconnect resource hints for Google Fonts CDN into <head>.
- * Place this component AS EARLY AS POSSIBLE in the app tree, ideally
- * directly inside <head> or root layout.
- *
- * WHY THIS MATTERS:
- * If @import url() is inside a CSS file, browser must:
- * 1. Parse HTML -> download JS bundle -> execute CSS -> hit @import -> start Google Fonts connection
- * Preconnect hints allow browser to establish TCP handshake + TLS connection early at step 1,
- * saving 100-500ms connection latency depending on network.
- *
- * USAGE:
- * ```tsx
- * // app/layout.tsx (Next.js) or index.html equivalent
- * import { MaterialSymbolsPreconnect } from '@bug-on/m3-expressive';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <head>
- *         <MaterialSymbolsPreconnect />
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * }
- * ```
- *
- * NOTE: Use this component only with CDN mode.
- * Self-hosted fonts do not require preconnecting to external origins.
- */
-interface MaterialSymbolsPreconnectProps {
-    /**
-     * Array of Material Symbols font variants to load.
-     * Include only variants used by application to minimize bandwidth.
-     * @default ["outlined"]
-     */
-    variants?: Array<"outlined" | "rounded" | "sharp">;
-}
-declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): react_jsx_runtime.JSX.Element;
-type ThemeMode = "light" | "dark" | "system";
-/**
- * Resolves the effective color scheme from a ThemeMode.
- * When mode is "system", reads the OS preference via matchMedia.
- * Returns "light" as the safe default in SSR environments.
- */
-declare function resolveMode(mode: ThemeMode): "light" | "dark";
-interface MD3ColorScheme {
-    primary: string;
-    onPrimary: string;
-    primaryContainer: string;
-    onPrimaryContainer: string;
-    inversePrimary: string;
-    primaryFixed: string;
-    primaryFixedDim: string;
-    onPrimaryFixed: string;
-    onPrimaryFixedVariant: string;
-    secondary: string;
-    onSecondary: string;
-    secondaryContainer: string;
-    onSecondaryContainer: string;
-    secondaryFixed: string;
-    secondaryFixedDim: string;
-    onSecondaryFixed: string;
-    onSecondaryFixedVariant: string;
-    tertiary: string;
-    onTertiary: string;
-    tertiaryContainer: string;
-    onTertiaryContainer: string;
-    tertiaryFixed: string;
-    tertiaryFixedDim: string;
-    onTertiaryFixed: string;
-    onTertiaryFixedVariant: string;
-    error: string;
-    onError: string;
-    errorContainer: string;
-    onErrorContainer: string;
-    surface: string;
-    onSurface: string;
-    surfaceVariant: string;
-    onSurfaceVariant: string;
-    surfaceTint: string;
-    surfaceContainerLowest: string;
-    surfaceContainerLow: string;
-    surfaceContainer: string;
-    surfaceContainerHigh: string;
-    surfaceContainerHighest: string;
-    inverseSurface: string;
-    inverseOnSurface: string;
-    background: string;
-    onBackground: string;
-    outline: string;
-    outlineVariant: string;
-    shadow: string;
-    scrim: string;
-}
-/**
- * Generate a complete MD3 color scheme from a source color hex string.
- * Uses the HCT color space algorithm — same as Material You on Android.
- */
-declare function generateM3Theme(sourceColorHex: string, mode?: "light" | "dark"): MD3ColorScheme;
-/**
- * Apply an MD3 dynamic color scheme to the document root as CSS custom properties.
- * Sets both `--md-sys-color-*` tokens (used by components) and
- * `--color-m3-*` tokens (used by Tailwind arbitrary values in apps).
- *
- * Also sets `data-theme` attribute for dark mode CSS selectors.
- */
-declare function applyTheme(sourceColorHex: string, mode?: ThemeMode, root?: HTMLElement): void;
-declare function cn(...inputs: ClassValue[]): string;
-/**
- * Props cho component {@link Icon}.
- *
- * All variable font axes are mapped directly to `font-variation-settings`.
- */
-interface IconProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Name of the Material Symbol in snake_case format.
-     * @example "home", "arrow_forward", "settings"
-     * @see https://fonts.google.com/icons
-     */
-    name: string;
-    /**
-     * Geometric style variant — maps to font family.
-     * @default "outlined"
-     */
-    variant?: "outlined" | "rounded" | "sharp";
-    /**
-     * `FILL` axis. `0` = outlined, `1` = filled.
-     * Features spring animation when `animateFill` is true.
-     * @default 0
-     */
-    fill?: 0 | 1;
-    /**
-     * `wght` axis — stroke weight. Should match surrounding text weight.
-     * @default 400
-     */
-    weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
-    /**
-     * `GRAD` axis — fine-tunes visual weight without affecting layout dimensions.
-     * Use `-25` on dark backgrounds to offset light halation effects.
-     * @default 0
-     */
-    grade?: -50 | -25 | 0 | 100 | 200;
-    /**
-     * `opsz` axis — optical size in dp. Used to set `font-size` if `size` is not specified.
-     * Match rendered pixel size for best quality.
-     * @default 24
-     */
-    opticalSize?: 20 | 24 | 40 | 48;
-    /**
-     * Direct `font-size` override in px. `opsz` axis still respects `opticalSize`.
-     * @example size={18} opticalSize={20}
-     */
-    size?: number | "inherit";
-    /**
-     * Enables smooth spring animation when toggling FILL axis (uses `SPRING_TRANSITION_FAST`).
-     * Requires `motion` dependency.
-     * @default false
-     * @example <Icon name="favorite" fill={isLiked ? 1 : 0} animateFill />
-     */
-    animateFill?: boolean;
-}
-/**
- * Material Symbols (variable font) Icon component.
- *
- * Make sure to import the icon font CSS before usage:
- * ```ts
- * import '@bug-on/m3-expressive/material-symbols-cdn.css';
- * ```
- *
- * @remarks
- * - Use snake_case for icon names: `"arrow_forward"`, NOT `"ArrowForward"`.
- * - `aria-hidden="true"` is attached automatically — provide screen reader labels on parent elements.
- *
- * @example
- * ```tsx
- * // Basic Icon
- * <Icon name="home" />
- *
- * // Visual customization (filled, heavy weight)
- * <Icon name="favorite" variant="rounded" fill={1} weight={300} />
- *
- * // Animated transition on state change
- * <Icon name="bookmark" fill={saved ? 1 : 0} animateFill />
- *
- * // Custom size override
- * <Icon name="close" size={18} opticalSize={20} />
- *
- * // Combination with other components
- * <Button icon={<Icon name="add" />}>Add to cart</Button>
- * ```
- *
- * @see https://fonts.google.com/icons
- * @see https://m3.material.io/styles/icons/overview
- */
-declare const Icon: React$1.NamedExoticComponent<IconProps & React$1.RefAttributes<HTMLSpanElement>>;
-/**
- * Represents a single ripple wave instance with position and size metadata.
- *
- * @example
- * ```tsx
- * const ripple: RippleOrigin = { id: Date.now(), x: 50, y: 30, size: 200 };
- * ```
- */
-interface RippleOrigin {
-    /** Unique identifier used as React key and for removal. */
-    id: number;
-    /** X coordinate of the pointer event relative to the container's left edge (px). */
-    x: number;
-    /** Y coordinate of the pointer event relative to the container's top edge (px). */
-    y: number;
-    /**
-     * Diameter of the ripple circle (px).
-     * Typically `Math.hypot(width, height) * 2` to ensure it fills the container.
-     */
-    size: number;
-}
-/**
- * Props for the `Ripple` presentation component.
- */
-interface RippleProps {
-    /** Active ripple instances to render. Managed by the parent via `useRipple`. */
-    ripples: RippleOrigin[];
-    /** Called when a ripple's exit animation completes — remove it from state. */
-    onRippleDone: (id: number) => void;
-    /**
-     * Completely disables the ripple effect.
-     * Use this when the parent element is disabled or interaction is not desired.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * When `true`, the ripple respects the user's OS-level
-     * `prefers-reduced-motion` accessibility setting and renders nothing if active.
-     *
-     * Set to `false` to always show ripples regardless of system preference.
-     * @default true
-     */
-    respectSystemMotion?: boolean;
-}
-/**
- * MD3 Expressive Ripple — animated touch-feedback wave layer.
- *
- * Renders absolutely-positioned ripple circles inside an `overflow-hidden`
- * container. Must be placed as a direct child of the interactive element.
- *
- * @remarks
- * - The parent element **must** have `overflow: hidden` and `position: relative`
- *   (or equivalent) for clipping to work correctly.
- * - Set `disabled` to `true` on parent's disabled state to avoid stale ripples.
- * - The ripple color is `currentColor` at 12% opacity — matching MD3 state layer spec.
- *
- * @example
- * ```tsx
- * const { ripples, onPointerDown, removeRipple } = useRippleState();
- *
- * <button onPointerDown={onPointerDown} className="relative overflow-hidden">
- *   <Ripple ripples={ripples} onRippleDone={removeRipple} />
- *   Click me
- * </button>
- * ```
- *
- * @see {@link useRippleState} for the state management hook
- * @see https://m3.material.io/foundations/interaction/states/overview
- */
-declare function Ripple({ ripples, onRippleDone, disabled, respectSystemMotion, }: RippleProps): react_jsx_runtime.JSX.Element | null;
-/**
- * Options for configuring `useRippleState` behaviour.
- */
-interface UseRippleStateOptions {
-    /**
-     * When `true`, the ripple is suppressed — `onPointerDown` becomes a no-op.
-     * Use this to sync the ripple with the parent element's `disabled` state.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/**
- * `useRippleState` — state manager for MD3 Expressive ripple waves.
- *
- * Tracks active ripple instances and provides pointer event handlers.
- * Pair with the `<Ripple>` component for rendering.
- *
- * @remarks
- * This hook only manages ripple *state* (coordinates, size, lifecycle).
- * The actual animation is handled by `<Ripple>` via Framer Motion.
- * Respecting `prefers-reduced-motion` is handled by `<Ripple>` itself.
- *
- * @param options - Configuration options. See {@link UseRippleStateOptions}.
- * @returns `{ ripples, onPointerDown, removeRipple }` — bind to the interactive element.
- *
- * @example
- * ```tsx
- * function MyButton({ disabled, children }) {
- *   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
- *
- *   return (
- *     <button
- *       disabled={disabled}
- *       onPointerDown={onPointerDown}
- *       className="relative overflow-hidden"
- *     >
- *       <Ripple ripples={ripples} onRippleDone={removeRipple} disabled={disabled} />
- *       {children}
- *     </button>
- *   );
- * }
- * ```
- *
- * @see {@link Ripple} for the rendering component
- */
-declare function useRippleState(options?: UseRippleStateOptions): {
-    ripples: RippleOrigin[];
-    onPointerDown: (e: React$1.PointerEvent<HTMLElement>) => void;
-    removeRipple: (id: number) => void;
-};
-/**
- * @deprecated Use `useRippleState` instead. This alias will be removed in a future version.
- * @see {@link useRippleState}
- */
-declare const useRipple: typeof useRippleState;
-interface ThemeContextValue {
-    sourceColor: string;
-    setSourceColor: (color: string) => void;
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-    /** The resolved color scheme actually applied — always "light" or "dark". */
-    effectiveMode: "light" | "dark";
-}
-interface MD3ThemeProviderProps {
-    children: ReactNode;
-    sourceColor?: string;
-    defaultMode?: ThemeMode;
-    persistToLocalStorage?: boolean;
-    /**
-     * A fully custom `Typography` instance.
-     * When provided, `fontFamily` and `fontVariationAxes` are ignored.
-     */
-    typography?: Typography;
-    /**
-     * Override the CSS `font-family` for all typography styles.
-     * Ignored when `typography` prop is provided.
-     * @example "'Inter', sans-serif"
-     */
-    fontFamily?: string;
-    /**
-     * Variable font axes applied globally via `font-variation-settings`.
-     * Merged on top of defaults (`ROND: 100`). Ignored when `typography` is provided.
-     * @example { ROND: 50 }
-     */
-    fontVariationAxes?: FontVariationAxes;
-    /**
-     * When `true`, mounts `SnackbarHost` inside the provider and exposes
-     * `useSnackbar()` to all descendants — no separate `<SnackbarProvider>` needed.
-     *
-     * Opt-in, default `false`. For advanced usage (e.g., scoped snackbars or
-     * custom host positioning), keep this `false` and use `<SnackbarProvider>`
-     * or `<SnackbarHost>` directly.
-     *
-     * @default false
-     */
-    enableSnackbar?: boolean;
-}
-declare function MD3ThemeProvider({ children, sourceColor: initialSourceColor, defaultMode, persistToLocalStorage, typography: typographyProp, fontFamily, fontVariationAxes, enableSnackbar, }: MD3ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextValue;
-declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode" | "effectiveMode">;
-export { Icon, type IconProps, type MD3ColorScheme, MD3ThemeProvider, type MD3ThemeProviderProps, MaterialSymbolsPreconnect, Ripple, type RippleOrigin, type RippleProps, type ThemeMode, type UseRippleStateOptions, applyTheme, cn, generateM3Theme, resolveMode, useRipple$1 as useDOMRipple, useMediaQuery, useRipple, useRippleState, useTheme, useThemeMode };
+export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-Bc5Wj_pc.js';
+export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'clsx';
+import './typography-339RV6v7.js';

package/dist/core.js CHANGED Viewed

@@ -172,66 +172,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 = materialColorUtilities.argbFromHex(sourceColorHex);
-  const theme = materialColorUtilities.themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => materialColorUtilities.hexFromArgb(palette.tone(t));
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = materialColorUtilities.Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new materialColorUtilities.SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new materialColorUtilities.SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new materialColorUtilities.SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new materialColorUtilities.SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new materialColorUtilities.SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new materialColorUtilities.SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new materialColorUtilities.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) => materialColorUtilities.hexFromArgb(argb);
   return {
-    primary: materialColorUtilities.hexFromArgb(scheme.primary),
-    onPrimary: materialColorUtilities.hexFromArgb(scheme.onPrimary),
-    primaryContainer: materialColorUtilities.hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: materialColorUtilities.hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: materialColorUtilities.hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: materialColorUtilities.hexFromArgb(scheme.secondary),
-    onSecondary: materialColorUtilities.hexFromArgb(scheme.onSecondary),
-    secondaryContainer: materialColorUtilities.hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: materialColorUtilities.hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: materialColorUtilities.hexFromArgb(scheme.tertiary),
-    onTertiary: materialColorUtilities.hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: materialColorUtilities.hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: materialColorUtilities.hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: materialColorUtilities.hexFromArgb(scheme.error),
-    onError: materialColorUtilities.hexFromArgb(scheme.onError),
-    errorContainer: materialColorUtilities.hexFromArgb(scheme.errorContainer),
-    onErrorContainer: materialColorUtilities.hexFromArgb(scheme.onErrorContainer),
-    surface: materialColorUtilities.hexFromArgb(scheme.surface),
-    onSurface: materialColorUtilities.hexFromArgb(scheme.onSurface),
-    surfaceVariant: materialColorUtilities.hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: materialColorUtilities.hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: materialColorUtilities.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: materialColorUtilities.hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: materialColorUtilities.hexFromArgb(scheme.inverseOnSurface),
-    background: materialColorUtilities.hexFromArgb(scheme.background),
-    onBackground: materialColorUtilities.hexFromArgb(scheme.onBackground),
-    outline: materialColorUtilities.hexFromArgb(scheme.outline),
-    outlineVariant: materialColorUtilities.hexFromArgb(scheme.outlineVariant),
-    shadow: materialColorUtilities.hexFromArgb(scheme.shadow),
-    scrim: materialColorUtilities.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);
@@ -2490,6 +2534,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -2498,6 +2544,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = React11.useState(initialSourceColor);
   const [mode, setMode] = React11.useState(defaultMode);
   const [isHydrated, setIsHydrated] = React11.useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = React11.useState("light");
+  React11.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);
+  }, []);
   React11.useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -2509,25 +2566,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   React11.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]);
-  React11.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 = React11.useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = React11.useMemo(() => {
     if (typographyProp) return typographyProp;