@bug-on/md3-react 3.0.0 → 3.0.1

package/dist/index.mjs

@@ -153,6 +153,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 = argbFromHex(sourceColorHex);
   const theme = themeFromSourceColor(sourceColor);
@@ -211,13 +216,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 twMerge(clsx(inputs));
@@ -1086,6 +1092,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 },
@@ -3926,15 +3937,12 @@ var buttonColorVariants = 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.Children.only(children);
     return child.props.children;
   }
-  return typeof children === "string" ? toSentenceCase(children) : children;
+  return children;
 }
 var MOTION_PROP_KEYS = [
   "animate",
@@ -4123,7 +4131,7 @@ var ButtonComponent = React38.forwardRef(
         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
         }
@@ -6985,11 +6993,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
     }
   );
 }
@@ -13046,7 +13054,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]);
   useEffect(() => {
@@ -13057,9 +13066,17 @@ function MD3ThemeProvider({
       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);
   const themeValue = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode }),
-    [sourceColor, mode]
+    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+    [sourceColor, mode, effectiveMode]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;
@@ -13091,8 +13108,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,
@@ -13760,6 +13777,6 @@ function TooltipBox({
   ] });
 }
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, 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, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SubMenu, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useMenuContext, useRipple2 as 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, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, CHECK_ICON_VARIANTS, Card, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, 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, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SubMenu, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map