@bug-on/md3-react 3.0.0 → 3.0.1

package/.turbo/turbo-build.log

@@ -1,33 +1,42 @@
-
-> @bug-on/md3-react@3.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
-> tsup
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.1
-CLI Using tsup config: /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react/tsup.config.ts
-CLI Target: es2017
-CJS Build start
-ESM Build start
-DTS Build start
-ESM dist/index.mjs     480.46 KB
-ESM dist/index.mjs.map 1.11 MB
-ESM ⚡️ Build success in 1662ms
-CJS dist/index.js     499.28 KB
-CJS dist/index.js.map 1.11 MB
-CJS ⚡️ Build success in 1663ms
-Copying assets to dist...
-✅ Copied src/assets to dist/assets
-✅ Copied typography.css to dist/typography.css
-✅ Copied index.css to dist/index.css
-✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
-✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
-✅ Generated index.css.d.ts
-✅ Generated typography.css.d.ts
-✅ Generated material-symbols-cdn.css.d.ts
-✅ Generated material-symbols-self-hosted.css.d.ts
-✅ Prepended "use client" to index.js
-✅ Prepended "use client" to index.mjs
-DTS ⚡️ Build success in 4298ms
-DTS dist/index.d.ts  233.73 KB
-DTS dist/index.d.mts 233.73 KB
+
+
+> @bug-on/md3-react@3.0.1 build /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react
+> tsup
+
+CLI Building entry: src/index.ts, src/plugin.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react/tsup.config.ts
+CLI Target: es2017
+CJS Build start
+ESM Build start
+DTS Build start
+ESM dist/plugin.mjs     119.00 B
+ESM dist/plugin.mjs.map 91.00 B
+ESM dist/index.mjs      481.27 KB
+ESM dist/index.mjs.map  1.11 MB
+ESM ⚡️ Build success in 1434ms
+CJS dist/plugin.js     337.00 B
+CJS dist/plugin.js.map 90.00 B
+CJS dist/index.js      500.12 KB
+CJS dist/index.js.map  1.11 MB
+CJS ⚡️ Build success in 1434ms
+Copying assets to dist...
+✅ Copied src/assets to dist/assets
+✅ Copied typography.css to dist/typography.css
+✅ Bundled colors.css from md3-tokens into index.css
+✅ Bundled shape.css from md3-tokens into index.css
+✅ Built bundled index.css (tokens + component base) to dist/index.css
+✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
+✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
+✅ Generated index.css.d.ts
+✅ Generated typography.css.d.ts
+✅ Generated material-symbols-cdn.css.d.ts
+✅ Generated material-symbols-self-hosted.css.d.ts
+✅ Prepended "use client" to index.js
+✅ Prepended "use client" to index.mjs
+DTS ⚡️ Build success in 5446ms
+DTS dist/plugin.d.ts  48.00 B
+DTS dist/index.d.ts   234.14 KB
+DTS dist/plugin.d.mts 48.00 B
+DTS dist/index.d.mts  234.14 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bug-on/md3-react
 
+## 3.0.1
+
+### Patch Changes
+
+- - **React**: Automatically bundle CSS tokens into `index.css` for easier setup.
+  - **React**: Re-export Tailwind plugin via `@bug-on/md3-react/plugin`.
+  - **React**: Add `@bug-on/md3-tailwind` and `@bug-on/md3-tokens` as direct dependencies.
+  - **Tokens**: Fix build warning when `index.css` is missing in src.
+  - **Tailwind**: Improved compatibility for Tailwind v3 and v4.
+  - **Build**: Optimized build process using native tsup features.
+- Updated dependencies
+  - @bug-on/md3-tailwind@3.0.1
+  - @bug-on/md3-tokens@3.0.1
+
 ## 3.0.0
 
 ### Major Changes

package/dist/index.css

@@ -1,3 +1,181 @@
+/* @bug-on/md3-tokens — MD3 System Color Tokens */
+/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
+ *
+ * Mapping: PaletteTokens → ColorLightTokens → CSS variable
+ * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
+ */
+:root {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #6750a4; /* Primary40  */
+	--md-sys-color-on-primary: #ffffff; /* Primary100 */
+	--md-sys-color-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-on-primary-container: #21005d; /* Primary10  */
+	--md-sys-color-inverse-primary: #d0bcff; /* Primary80  */
+
+	/* ── Primary Fixed (stable across light/dark) ────────────────────────── */
+	--md-sys-color-primary-fixed: #eaddff; /* Primary90 */
+	--md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
+	--md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
+	--md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #625b71; /* Secondary40  */
+	--md-sys-color-on-secondary: #ffffff; /* Secondary100 */
+	--md-sys-color-secondary-container: #e8def8; /* Secondary90  */
+	--md-sys-color-on-secondary-container: #1d192b; /* Secondary10  */
+
+	/* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
+	--md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
+	--md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
+	--md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
+	--md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #7d5260; /* Tertiary40  */
+	--md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
+	--md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90  */
+	--md-sys-color-on-tertiary-container: #31111d; /* Tertiary10  */
+
+	/* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
+	--md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
+	--md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
+	--md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
+	--md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #b3261e; /* Error40  */
+	--md-sys-color-on-error: #ffffff; /* Error100 */
+	--md-sys-color-error-container: #f9dedc; /* Error90  */
+	--md-sys-color-on-error-container: #410e0b; /* Error10  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #fef7ff; /* Neutral98 */
+	--md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
+	--md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
+	--md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
+	--md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
+	--md-sys-color-surface-tint: #6750a4; /* = primary */
+	--md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
+	--md-sys-color-surface-container-low: #f7f2fa; /* Neutral96  */
+	--md-sys-color-surface-container: #f3edf7; /* Neutral94  */
+	--md-sys-color-surface-container-high: #ece6f0; /* Neutral92  */
+	--md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #313033; /* Neutral20 */
+	--md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
+	--md-sys-color-on-background: #1c1b1f; /* Neutral10  */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #79747e; /* NeutralVariant50 */
+	--md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000; /* Neutral0 */
+	--md-sys-color-shadow: #000000; /* Neutral0 */
+
+	/* ── Indicator tokens — Loading & Progress ───────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+/* Dark Theme overrides
+ * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
+ */
+[data-theme="dark"],
+.dark {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #d0bcff; /* Primary80  */
+	--md-sys-color-on-primary: #381e72; /* Primary20  */
+	--md-sys-color-primary-container: #4f378b; /* Primary30  */
+	--md-sys-color-on-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-inverse-primary: #6750a4; /* Primary40  */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #ccc2dc; /* Secondary80  */
+	--md-sys-color-on-secondary: #332d41; /* Secondary20  */
+	--md-sys-color-secondary-container: #4a4458; /* Secondary30  */
+	--md-sys-color-on-secondary-container: #e8def8; /* Secondary90  */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #efb8c8; /* Tertiary80  */
+	--md-sys-color-on-tertiary: #492532; /* Tertiary20  */
+	--md-sys-color-tertiary-container: #633b48; /* Tertiary30  */
+	--md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90  */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #f2b8b5; /* Error80  */
+	--md-sys-color-on-error: #601410; /* Error20  */
+	--md-sys-color-error-container: #8c1d18; /* Error30  */
+	--md-sys-color-on-error-container: #f9dedc; /* Error90  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #141218; /* Neutral6   */
+	--md-sys-color-on-surface: #e6e1e5; /* Neutral90  */
+	--md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
+	--md-sys-color-surface-dim: #141218; /* Neutral6  */
+	--md-sys-color-surface-bright: #3b383e; /* Neutral24 */
+	--md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
+	--md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4   */
+	--md-sys-color-surface-container-low: #1d1b20; /* Neutral10  */
+	--md-sys-color-surface-container: #211f26; /* Neutral12  */
+	--md-sys-color-surface-container-high: #2b2930; /* Neutral17  */
+	--md-sys-color-surface-container-highest: #36343b; /* Neutral22  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
+	--md-sys-color-inverse-on-surface: #313033; /* Neutral20 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
+	--md-sys-color-on-background: #e6e1e5; /* Neutral90 */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #938f99; /* NeutralVariant60 */
+	--md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000;
+	--md-sys-color-shadow: #000000;
+
+	/* ── Indicator tokens — Dark ─────────────────────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+:root {
+	--md-sys-shape-corner-none: 0px;
+	--md-sys-shape-corner-extra-small: 4px;
+	--md-sys-shape-corner-small: 8px;
+	--md-sys-shape-corner-medium: 12px;
+	--md-sys-shape-corner-large: 16px;
+	--md-sys-shape-corner-extra-large: 28px;
+	--md-sys-shape-corner-full: 9999px;
+}
+
+
+/* @bug-on/md3-react — Component Base Reset */
 /* @bug-on/md3-react - Base Reset Styles */
 
 /**

package/dist/index.d.mts

@@ -92,7 +92,13 @@ interface MaterialSymbolsPreconnectProps {
 }
 declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): react_jsx_runtime.JSX.Element;
 
-type ThemeMode = "light" | "dark";
+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;
@@ -146,7 +152,7 @@ interface MD3ColorScheme {
  * 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?: ThemeMode): MD3ColorScheme;
+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
@@ -5750,6 +5756,8 @@ interface ThemeContextValue {
     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;
@@ -5787,7 +5795,7 @@ interface MD3ThemeProviderProps {
 }
 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">;
+declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode" | "effectiveMode">;
 
 /**
  * A single entry in the Table of Contents.
@@ -6124,4 +6132,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple$1 as useDOMRipple, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, useAppBarScroll, useRipple$1 as useDOMRipple, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };

package/dist/index.d.ts

@@ -92,7 +92,13 @@ interface MaterialSymbolsPreconnectProps {
 }
 declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): react_jsx_runtime.JSX.Element;
 
-type ThemeMode = "light" | "dark";
+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;
@@ -146,7 +152,7 @@ interface MD3ColorScheme {
  * 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?: ThemeMode): MD3ColorScheme;
+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
@@ -5750,6 +5756,8 @@ interface ThemeContextValue {
     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;
@@ -5787,7 +5795,7 @@ interface MD3ThemeProviderProps {
 }
 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">;
+declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode" | "effectiveMode">;
 
 /**
  * A single entry in the Table of Contents.
@@ -6124,4 +6132,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple$1 as useDOMRipple, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, useAppBarScroll, useRipple$1 as useDOMRipple, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };

package/dist/index.js

@@ -178,6 +178,11 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
+function resolveMode(mode) {
+  if (mode !== "system") return 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);
@@ -236,13 +241,14 @@ function generateM3Theme(sourceColorHex, mode = "light") {
   };
 }
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
-  const colors = generateM3Theme(sourceColorHex, mode);
+  const resolved = resolveMode(mode);
+  const colors = generateM3Theme(sourceColorHex, resolved);
   for (const [key, value] of Object.entries(colors)) {
     const kebabKey = key.replace(/[A-Z]/g, (m47) => `-${m47.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
-  root.setAttribute("data-theme", mode);
+  root.setAttribute("data-theme", resolved);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -1111,6 +1117,11 @@ var SPRING_TRANSITION = {
   bounce: 0,
   duration: 0.3
 };
+var SPRING_TRANSITION_EXPRESSIVE = {
+  type: "spring",
+  bounce: 0.35,
+  duration: 0.4
+};
 var ICON_SPAN_VARIANTS = {
   initial: { scale: 0.01 },
   animate: { scale: 1 },
@@ -3951,15 +3962,12 @@ var buttonColorVariants = classVarianceAuthority.cva(
     defaultVariants: { colorStyle: "filled" }
   }
 );
-function toSentenceCase(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-}
 function resolveLabel(children, asChild) {
   if (asChild) {
     const child = React38__namespace.Children.only(children);
     return child.props.children;
   }
-  return typeof children === "string" ? toSentenceCase(children) : children;
+  return children;
 }
 var MOTION_PROP_KEYS = [
   "animate",
@@ -4148,7 +4156,7 @@ var ButtonComponent = React38__namespace.forwardRef(
         react.m.span,
         {
           layout: "size",
-          className: "inline-flex items-center gap-[inherit]",
+          className: "inline-flex items-center h-full gap-[inherit]",
           transition: SPRING_TRANSITION,
           children: labelText
         }
@@ -7010,11 +7018,11 @@ function ActivePill({ layoutId, disableInitial = false }) {
     {
       layoutId,
       className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
-      style: { borderRadius: 9999, zIndex: 0 },
-      initial: disableInitial ? false : { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: SPRING_TRANSITION
+      style: { borderRadius: 9999, zIndex: 0, originX: 0.5, originY: 0.5 },
+      initial: disableInitial ? false : { opacity: 0, scale: 0.5 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.5, transition: { duration: 0.15 } },
+      transition: SPRING_TRANSITION_EXPRESSIVE
     }
   );
 }
@@ -13071,7 +13079,8 @@ function MD3ThemeProvider({
       STORAGE_KEY_MODE
     );
     if (savedColor) setSourceColor(savedColor);
-    if (savedMode === "light" || savedMode === "dark") setMode(savedMode);
+    if (savedMode === "light" || savedMode === "dark" || savedMode === "system")
+      setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
   React38.useEffect(() => {
@@ -13082,9 +13091,17 @@ function MD3ThemeProvider({
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
   }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
+  React38.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);
   const themeValue = React38.useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode }),
-    [sourceColor, mode]
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
   );
   const typographyValue = React38.useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -13116,8 +13133,8 @@ function useTheme() {
   return context;
 }
 function useThemeMode() {
-  const { mode, setMode } = useTheme();
-  return { mode, setMode };
+  const { mode, setMode, effectiveMode } = useTheme();
+  return { mode, setMode, effectiveMode };
 }
 function TableOfContents({
   items,
@@ -13932,6 +13949,7 @@ exports.applyTheme = applyTheme;
 exports.buildWavePath = buildWavePath;
 exports.cn = cn;
 exports.generateM3Theme = generateM3Theme;
+exports.resolveMode = resolveMode;
 exports.useAppBarScroll = useAppBarScroll;
 exports.useDOMRipple = useRipple;
 exports.useMediaQuery = useMediaQuery;