@bug-on/md3-react 3.0.0 → 3.0.2

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
 
-> @bug-on/md3-react@3.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
+> @bug-on/md3-react@3.0.2 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
 > tsup
 
-CLI Building entry: src/index.ts
+CLI Building entry: src/index.ts, src/plugin.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
@@ -10,16 +10,22 @@
 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
+CJS dist/plugin.js     337.00 B
+CJS dist/index.js      511.81 KB
+CJS dist/plugin.js.map 90.00 B
+CJS dist/index.js.map  1.13 MB
+CJS ⚡️ Build success in 1702ms
+ESM dist/plugin.mjs     119.00 B
+ESM dist/index.mjs      492.39 KB
+ESM dist/plugin.mjs.map 91.00 B
+ESM dist/index.mjs.map  1.13 MB
+ESM ⚡️ Build success in 1703ms
 Copying assets to dist...
 ✅ Copied src/assets to dist/assets
 ✅ Copied typography.css to dist/typography.css
-✅ Copied index.css to dist/index.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
@@ -28,6 +34,8 @@ Copying assets to dist...
 ✅ 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
+DTS ⚡️ Build success in 5006ms
+DTS dist/plugin.d.ts  48.00 B
+DTS dist/index.d.ts   236.31 KB
+DTS dist/plugin.d.mts 48.00 B
+DTS dist/index.d.mts  236.31 KB

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @bug-on/md3-react
 
+## 3.0.2
+
+### Patch Changes
+
+- **Motion**: Improved `SPRING_TRANSITION_EXPRESSIVE` with a stronger bounce (0.35 → 0.45) to match MD3 Expressive standards.
+- **Navigation**: Added `activeIndicatorTransition` prop to `NavigationBar` and `NavigationRail` for custom spring configuration.
+- **Navigation**: Enhanced active indicator pill with a stronger "pop" scale animation.
+- **Documentation**: Added custom animation examples for Navigation components and updated API references.
+- **AI Context**: Updated `llms.txt` and `llms-full.txt` with the latest motion specs and Navigation Bar reference.
+
+## 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
@@ -3186,7 +3192,55 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
-type NavigationRailVariant = "collapsed" | "expanded" | "modal";
+/**
+ * Layout styling for navigation bar items.
+ * - vertical: Icon above label (default for mobile)
+ * - horizontal: Icon beside label (forced)
+ */
+type NavigationBarItemLayout = "vertical" | "horizontal";
+/**
+ * Visual variant of the Navigation Bar.
+ * - flexible: Default MD3 behavior (h-16), becomes horizontal on desktop.
+ * - baseline: Taller MD3 behavior (h-20), always vertical.
+ * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
+ */
+type NavigationBarVariant = "flexible" | "baseline" | "xr";
+interface NavigationBarItemProps {
+    selected: boolean;
+    icon: React$1.ReactNode;
+    label: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: React$1.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+}
+interface NavigationBarProps {
+    /** Visual variant of the Navigation Bar */
+    variant?: NavigationBarVariant;
+    /** Forces a specific item layout (horizontal/vertical) */
+    itemLayout?: NavigationBarItemLayout;
+    /** Whether the bar should hide when scrolling down */
+    hideOnScroll?: boolean;
+    /** Whether the bar should have an elevation shadow */
+    elevated?: boolean;
+    /** Whether the bar is fixed to the viewport (default) or absolute */
+    fixed?: boolean;
+    /** Container ref to track scrolling for hideOnScroll */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Transition for the active indicator pill */
+    activeIndicatorTransition?: Transition;
+    /** Navigation items */
+    children: React$1.ReactNode;
+    /** Optional additional classes */
+    className?: string;
+    /** Optional inline styles */
+    style?: React$1.CSSProperties;
+}
+declare const NavigationBarItem: React$1.NamedExoticComponent<NavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+
+type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationRailItemProps {
     selected: boolean;
@@ -3203,11 +3257,12 @@ interface NavigationRailProps {
     labelVisibility?: NavigationRailLabelVisibility;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
+    fabPlacement?: "contained" | "spatialized";
     footer?: React$1.ReactNode;
     narrow?: boolean;
     open?: boolean;
-    xr?: boolean | "contained" | "spatialized";
     onClose?: () => void;
+    activeIndicatorTransition?: Transition;
     children: React$1.ReactNode;
     className?: string;
     style?: React$1.CSSProperties;
@@ -3639,6 +3694,8 @@ interface ScrollAreaProps extends Omit<React$1.ComponentPropsWithoutRef<typeof R
     scrollHideDelay?: number;
     /** Extra classes applied to the inner viewport element. */
     viewportClassName?: string;
+    /** Ref to the scrolling viewport element. */
+    viewportRef?: React$1.Ref<HTMLDivElement>;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<RadixScrollArea.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -5750,6 +5807,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 +5846,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 +6183,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, NavigationBar, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, 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
@@ -3186,7 +3192,55 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
-type NavigationRailVariant = "collapsed" | "expanded" | "modal";
+/**
+ * Layout styling for navigation bar items.
+ * - vertical: Icon above label (default for mobile)
+ * - horizontal: Icon beside label (forced)
+ */
+type NavigationBarItemLayout = "vertical" | "horizontal";
+/**
+ * Visual variant of the Navigation Bar.
+ * - flexible: Default MD3 behavior (h-16), becomes horizontal on desktop.
+ * - baseline: Taller MD3 behavior (h-20), always vertical.
+ * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
+ */
+type NavigationBarVariant = "flexible" | "baseline" | "xr";
+interface NavigationBarItemProps {
+    selected: boolean;
+    icon: React$1.ReactNode;
+    label: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: React$1.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+}
+interface NavigationBarProps {
+    /** Visual variant of the Navigation Bar */
+    variant?: NavigationBarVariant;
+    /** Forces a specific item layout (horizontal/vertical) */
+    itemLayout?: NavigationBarItemLayout;
+    /** Whether the bar should hide when scrolling down */
+    hideOnScroll?: boolean;
+    /** Whether the bar should have an elevation shadow */
+    elevated?: boolean;
+    /** Whether the bar is fixed to the viewport (default) or absolute */
+    fixed?: boolean;
+    /** Container ref to track scrolling for hideOnScroll */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Transition for the active indicator pill */
+    activeIndicatorTransition?: Transition;
+    /** Navigation items */
+    children: React$1.ReactNode;
+    /** Optional additional classes */
+    className?: string;
+    /** Optional inline styles */
+    style?: React$1.CSSProperties;
+}
+declare const NavigationBarItem: React$1.NamedExoticComponent<NavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+
+type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationRailItemProps {
     selected: boolean;
@@ -3203,11 +3257,12 @@ interface NavigationRailProps {
     labelVisibility?: NavigationRailLabelVisibility;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
+    fabPlacement?: "contained" | "spatialized";
     footer?: React$1.ReactNode;
     narrow?: boolean;
     open?: boolean;
-    xr?: boolean | "contained" | "spatialized";
     onClose?: () => void;
+    activeIndicatorTransition?: Transition;
     children: React$1.ReactNode;
     className?: string;
     style?: React$1.CSSProperties;
@@ -3639,6 +3694,8 @@ interface ScrollAreaProps extends Omit<React$1.ComponentPropsWithoutRef<typeof R
     scrollHideDelay?: number;
     /** Extra classes applied to the inner viewport element. */
     viewportClassName?: string;
+    /** Ref to the scrolling viewport element. */
+    viewportRef?: React$1.Ref<HTMLDivElement>;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<RadixScrollArea.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -5750,6 +5807,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 +5846,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 +6183,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, NavigationBar, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, 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 };