@bug-on/m3-expressive 1.3.4 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +31 -7
  3. package/dist/assets/material-symbols-cdn.css +17 -23
  4. package/dist/buttons.js +129 -35
  5. package/dist/buttons.js.map +1 -1
  6. package/dist/buttons.mjs +129 -35
  7. package/dist/buttons.mjs.map +1 -1
  8. package/dist/{core-COvZHQ_k.d.ts → core-Cckt8qEm.d.ts} +10 -4
  9. package/dist/{core-CRkixy1y.d.mts → core-DDfG4pym.d.mts} +10 -4
  10. package/dist/core.d.mts +2 -2
  11. package/dist/core.d.ts +2 -2
  12. package/dist/core.js +6 -5
  13. package/dist/core.js.map +1 -1
  14. package/dist/core.mjs +6 -5
  15. package/dist/core.mjs.map +1 -1
  16. package/dist/fading-blur-mask--uZbBKLj.d.mts +77 -0
  17. package/dist/fading-blur-mask--uZbBKLj.d.ts +77 -0
  18. package/dist/feedback.js +1 -1
  19. package/dist/feedback.js.map +1 -1
  20. package/dist/feedback.mjs +1 -1
  21. package/dist/feedback.mjs.map +1 -1
  22. package/dist/forms.js +1 -1
  23. package/dist/forms.js.map +1 -1
  24. package/dist/forms.mjs +1 -1
  25. package/dist/forms.mjs.map +1 -1
  26. package/dist/index.d.mts +5 -4
  27. package/dist/index.d.ts +5 -4
  28. package/dist/index.js +266 -122
  29. package/dist/index.js.map +1 -1
  30. package/dist/index.mjs +266 -122
  31. package/dist/index.mjs.map +1 -1
  32. package/dist/layout.d.mts +5 -3
  33. package/dist/layout.d.ts +5 -3
  34. package/dist/layout.js +61 -6
  35. package/dist/layout.js.map +1 -1
  36. package/dist/layout.mjs +61 -7
  37. package/dist/layout.mjs.map +1 -1
  38. package/dist/material-symbols-cdn.css +17 -23
  39. package/dist/navigation.d.mts +25 -83
  40. package/dist/navigation.d.ts +25 -83
  41. package/dist/navigation.js +22 -9
  42. package/dist/navigation.js.map +1 -1
  43. package/dist/navigation.mjs +22 -9
  44. package/dist/navigation.mjs.map +1 -1
  45. package/dist/overlays.js +1 -1
  46. package/dist/overlays.js.map +1 -1
  47. package/dist/overlays.mjs +1 -1
  48. package/dist/overlays.mjs.map +1 -1
  49. package/dist/pickers.d.mts +12 -0
  50. package/dist/pickers.d.ts +12 -0
  51. package/dist/pickers.js +98 -65
  52. package/dist/pickers.js.map +1 -1
  53. package/dist/pickers.mjs +98 -65
  54. package/dist/pickers.mjs.map +1 -1
  55. package/dist/{typography-339RV6v7.d.mts → typography-CKTjvlZ4.d.mts} +25 -0
  56. package/dist/{typography-339RV6v7.d.ts → typography-CKTjvlZ4.d.ts} +25 -0
  57. package/dist/typography.css +1 -1
  58. package/llms-full.txt +17 -13
  59. package/llms.txt +11 -6
  60. package/package.json +3 -3
package/dist/material-symbols-cdn.css CHANGED
@@ -1,35 +1,29 @@
1
1
  /*
2
2
  * Material Symbols — CDN version (Google Fonts)
3
3
  *
4
- * USAGE IN APP'S HTML <head>:
5
- * Add preconnect hints BEFORE this CSS loads for fastest performance:
4
+ * NOTE: This CSS file provides .md-icon ligature/alignment rules.
5
+ * To load the actual variable font files from Google Fonts:
6
6
  *
7
+ * 1. FOR REACT (VITE) - In index.html <head>:
7
8
  * <link rel="preconnect" href="https://fonts.googleapis.com" />
8
- * <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
9
+ * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />
11
+ * <!-- Add Outlined or Sharp if also needed: -->
12
+ * <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" /> -->
13
+ * <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" /> -->
9
14
  *
10
- * Then import this CSS:
11
- * import '@bug-on/m3-expressive/material-symbols-cdn.css'
15
+ * 2. FOR NEXT.JS (APP ROUTER) - In app/layout.tsx:
16
+ * import { MaterialSymbolsPreconnect } from '@bug-on/m3-expressive';
17
+ * // Inside <head>:
18
+ * <MaterialSymbolsPreconnect variants={["rounded"]} display="block" />
12
19
  *
13
- * WHY TWO preconnect?
14
- * Google Fonts serves the CSS stylesheet from fonts.googleapis.com
15
- * but the actual .woff2 font files come from fonts.gstatic.com (different origin).
16
- * The crossorigin attribute is required for font files (CORS request).
20
+ * 3. THEN IMPORT THIS CSS IN YOUR ROOT STYLESHEET (index.css / globals.css):
21
+ * import '@bug-on/m3-expressive/material-symbols-cdn.css';
17
22
  *
18
23
  * FONT-DISPLAY NOTE for icon fonts:
19
- * We use font-display: block (NOT swap) because:
20
- * - swap would briefly show raw text like "arrow_forward" before icon loads = jarring layout shift
21
- * - block hides text during load period (max 3s), then shows icon = cleaner UX
22
- * - optional is NOT suitable: if font misses the load window, icons never appear
23
- */
24
-
25
- /*
26
- * INSTRUCTION:
27
- * Use the <MaterialSymbolsPreconnect /> component to load the actual Google Fonts CSS!
28
- *
29
- * We NO LONGER use @import url(...) here because CSS bundlers (like Next.js/Webpack)
30
- * often merge global CSS files and push @import statements below regular CSS rules.
31
- * According to CSS spec, any @import MUST be at the very top, so it breaks randomly.
32
- * Loading via `<link rel="stylesheet">` (handled by MaterialSymbolsPreconnect) is fully robust.
24
+ * We recommend display=block (NOT swap) because:
25
+ * - swap would briefly show raw text like "arrow_forward" before the font loads = jarring layout shift
26
+ * - block hides text during initial load, then shows icon = clean UX
33
27
  */
34
28
 
35
29
  /* ─────────────────────────────────────────────────────────────────────────────
package/dist/navigation.d.mts CHANGED
@@ -1,7 +1,9 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
1
+ import { c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.mjs';
2
+ export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask--uZbBKLj.mjs';
3
+ import * as motion from 'motion';
2
4
  import * as React$1 from 'react';
3
5
  import { RefObject } from 'react';
4
- import * as motion from 'motion';
6
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
7
  import * as RxContextMenu from '@radix-ui/react-context-menu';
6
8
  import { a as ContextMenuProps, C as ContextMenuContentProps, b as ContextMenuTriggerProps, j as MenuProps, c as MenuContentProps, k as MenuTriggerProps, l as MenuVariant, M as MenuColorVariant, q as MenuDensity, i as MenuPrimitive, d as MenuDividerProps, f as MenuGroupProps, h as MenuItemProps, S as SubMenuProps, o as VerticalMenuProps, V as VerticalMenuContentProps, m as VerticalMenuDividerProps } from './menu-types-rZNQFO7Y.mjs';
7
9
  export { e as MenuGroupPosition, g as MenuItemPosition, n as VerticalMenuGroupProps, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
@@ -11,79 +13,6 @@ import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs';
11
13
  import { d as MD3SlotWidth } from './md3-BQhRygSi.mjs';
12
14
  import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs';
13
15
 
14
- /**
15
- * @file fading-blur-mask.types.ts
16
- * Fading Edge & Backdrop Blur Mask — TypeScript interfaces.
17
- */
18
-
19
- /** Gradient fade direction for the blur mask. */
20
- type FadingBlurDirection = "top" | "bottom" | "both";
21
- /**
22
- * Props for the primitive `<FadingBlurMask>` component.
23
- */
24
- interface FadingBlurMaskProps {
25
- /**
26
- * Gradient fade direction.
27
- * - `top`: Fades from opaque at top to transparent downward (for Top App Bars).
28
- * - `bottom`: Fades from opaque at bottom to transparent upward (for Bottom App Bars).
29
- * - `both`: Fades at both top and bottom edges.
30
- * @default "top"
31
- */
32
- direction?: FadingBlurDirection;
33
- /**
34
- * Backdrop blur radius in pixels.
35
- * @default 12
36
- */
37
- blurIntensity?: number;
38
- /**
39
- * Height/length of the fade mask container or gradient zone.
40
- * Can be a CSS string (e.g., "100%", "64px") or pixel number.
41
- * @default "100%"
42
- */
43
- blurHeight?: number | string;
44
- /**
45
- * Tint or background color overlay mixed into the blur.
46
- * Defaults to MD3 surface token `var(--md-sys-color-surface)`.
47
- */
48
- color?: string;
49
- /** Additional CSS class names for styling. */
50
- className?: string;
51
- /** Custom inline styles. */
52
- style?: React$1.CSSProperties;
53
- /** Children components rendered inside the blur mask container if needed. */
54
- children?: React$1.ReactNode;
55
- }
56
- /**
57
- * Mixin interface for components that integrate Fading Blur functionality (e.g. AppBars).
58
- */
59
- interface FadingBlurProps {
60
- /**
61
- * Enables smooth fading edge and backdrop blur effect.
62
- * @default false
63
- */
64
- enableFadingBlur?: boolean;
65
- /**
66
- * Custom blur intensity in pixels when `enableFadingBlur` is active.
67
- * @default 12
68
- */
69
- blurIntensity?: number;
70
- /**
71
- * Custom blur height when `enableFadingBlur` is active.
72
- * Defaults to container height.
73
- */
74
- blurHeight?: number | string;
75
- }
76
-
77
- /**
78
- * `<FadingBlurMask>` component renders a smooth gradient fading backdrop blur overlay.
79
- *
80
- * @example
81
- * ```tsx
82
- * <FadingBlurMask direction="top" blurIntensity={16} />
83
- * ```
84
- */
85
- declare function FadingBlurMask({ direction, blurIntensity, blurHeight, color, className, style, children, }: FadingBlurMaskProps): react_jsx_runtime.JSX.Element;
86
-
87
16
  /**
88
17
  * @file app-bar.tokens.ts
89
18
  * MD3 Expressive App Bar — Design tokens ported from:
@@ -1643,6 +1572,19 @@ interface SearchProps {
1643
1572
  * @default false
1644
1573
  */
1645
1574
  hasGap?: boolean;
1575
+ /**
1576
+ * Whether to show the leading search icon.
1577
+ * - When `true` (default): renders `leadingIcon` if provided, else renders the default search icon.
1578
+ * - When `false`: hides the leading icon entirely.
1579
+ * @default true
1580
+ */
1581
+ showLeadingIcon?: boolean;
1582
+ /**
1583
+ * Whether to show the close/back button in the fullscreen SearchView header.
1584
+ * Only applies when `variant="fullscreen"`.
1585
+ * @default true
1586
+ */
1587
+ showCloseButton?: boolean;
1646
1588
  /**
1647
1589
  * Icon rendered at the leading edge of the search input.
1648
1590
  * Defaults to a built-in search icon.
@@ -1760,7 +1702,7 @@ declare function useSearch(): SearchContextValue;
1760
1702
  * Shared `searchId` (React.useId) links SearchBar and SearchView via
1761
1703
  * Framer Motion `layoutId` for seamless animated transitions.
1762
1704
  */
1763
- declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, leadingIcon, trailingIcon, avatar, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): react_jsx_runtime.JSX.Element;
1705
+ declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, showLeadingIcon, showCloseButton, leadingIcon, trailingIcon, avatar, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): react_jsx_runtime.JSX.Element;
1764
1706
  /** MD3 Expressive Search component with `Search.useSearch` context accessor. */
1765
1707
  declare const Search: typeof SearchComponent & {
1766
1708
  useSearch: typeof useSearch;
@@ -1842,7 +1784,7 @@ declare const SEARCH_DOCKED_REVEAL_SPRING: motion.Transition;
1842
1784
  declare const SEARCH_FULLSCREEN_SPRING: motion.Transition;
1843
1785
  declare const SEARCH_BAR_EXIT_SPRING: motion.Transition;
1844
1786
 
1845
- type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
1787
+ type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
1846
1788
  /** KeyDown handler from useSearchKeyboard. */
1847
1789
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1848
1790
  /** Currently highlighted suggestion index (-1 = none). */
@@ -1855,13 +1797,13 @@ type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" |
1855
1797
  * SearchView when active. Wrapped in AnimatePresence with mode="popLayout"
1856
1798
  * so it exits (fades/scales out) before SearchView claims the layoutId.
1857
1799
  */
1858
- declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element;
1800
+ declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, showLeadingIcon, leadingIcon, trailingIcon, avatar, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element;
1859
1801
 
1860
- type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1802
+ type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1861
1803
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1862
1804
  activeIndex: number;
1863
1805
  };
1864
- declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): react_jsx_runtime.JSX.Element;
1806
+ declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, showLeadingIcon, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): react_jsx_runtime.JSX.Element;
1865
1807
 
1866
1808
  /**
1867
1809
  * @file search-view-fullscreen.tsx
@@ -1883,7 +1825,7 @@ declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onAc
1883
1825
  * ESC key closes the view (handled by useSearchKeyboard).
1884
1826
  */
1885
1827
 
1886
- type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1828
+ type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "showCloseButton" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1887
1829
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1888
1830
  activeIndex: number;
1889
1831
  };
@@ -1896,7 +1838,7 @@ type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "
1896
1838
  * Contained style: no divider, background preserved.
1897
1839
  * Divided style: HorizontalDivider between header and results.
1898
1840
  */
1899
- declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React$1.ReactPortal | null;
1841
+ declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, showCloseButton, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React$1.ReactPortal | null;
1900
1842
 
1901
1843
  /**
1902
1844
  * @file tabs.types.ts
@@ -2769,4 +2711,4 @@ declare const ToolbarToggleButtonTokens: {
2769
2711
  readonly Gap: 8;
2770
2712
  };
2771
2713
 
2772
- 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, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FadingBlurDirection, FadingBlurMask, type FadingBlurMaskProps, type FadingBlurProps, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_ELEVATION, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuProps, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
2714
+ 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, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FadingBlurProps, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_ELEVATION, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuProps, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
package/dist/navigation.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
1
+ import { c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.js';
2
+ export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask--uZbBKLj.js';
3
+ import * as motion from 'motion';
2
4
  import * as React$1 from 'react';
3
5
  import { RefObject } from 'react';
4
- import * as motion from 'motion';
6
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
7
  import * as RxContextMenu from '@radix-ui/react-context-menu';
6
8
  import { a as ContextMenuProps, C as ContextMenuContentProps, b as ContextMenuTriggerProps, j as MenuProps, c as MenuContentProps, k as MenuTriggerProps, l as MenuVariant, M as MenuColorVariant, q as MenuDensity, i as MenuPrimitive, d as MenuDividerProps, f as MenuGroupProps, h as MenuItemProps, S as SubMenuProps, o as VerticalMenuProps, V as VerticalMenuContentProps, m as VerticalMenuDividerProps } from './menu-types-rZNQFO7Y.js';
7
9
  export { e as MenuGroupPosition, g as MenuItemPosition, n as VerticalMenuGroupProps, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.js';
@@ -11,79 +13,6 @@ import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.js';
11
13
  import { d as MD3SlotWidth } from './md3-BQhRygSi.js';
12
14
  import { B as BaseIconButtonProps } from './icon-button-Di8VX6ou.js';
13
15
 
14
- /**
15
- * @file fading-blur-mask.types.ts
16
- * Fading Edge & Backdrop Blur Mask — TypeScript interfaces.
17
- */
18
-
19
- /** Gradient fade direction for the blur mask. */
20
- type FadingBlurDirection = "top" | "bottom" | "both";
21
- /**
22
- * Props for the primitive `<FadingBlurMask>` component.
23
- */
24
- interface FadingBlurMaskProps {
25
- /**
26
- * Gradient fade direction.
27
- * - `top`: Fades from opaque at top to transparent downward (for Top App Bars).
28
- * - `bottom`: Fades from opaque at bottom to transparent upward (for Bottom App Bars).
29
- * - `both`: Fades at both top and bottom edges.
30
- * @default "top"
31
- */
32
- direction?: FadingBlurDirection;
33
- /**
34
- * Backdrop blur radius in pixels.
35
- * @default 12
36
- */
37
- blurIntensity?: number;
38
- /**
39
- * Height/length of the fade mask container or gradient zone.
40
- * Can be a CSS string (e.g., "100%", "64px") or pixel number.
41
- * @default "100%"
42
- */
43
- blurHeight?: number | string;
44
- /**
45
- * Tint or background color overlay mixed into the blur.
46
- * Defaults to MD3 surface token `var(--md-sys-color-surface)`.
47
- */
48
- color?: string;
49
- /** Additional CSS class names for styling. */
50
- className?: string;
51
- /** Custom inline styles. */
52
- style?: React$1.CSSProperties;
53
- /** Children components rendered inside the blur mask container if needed. */
54
- children?: React$1.ReactNode;
55
- }
56
- /**
57
- * Mixin interface for components that integrate Fading Blur functionality (e.g. AppBars).
58
- */
59
- interface FadingBlurProps {
60
- /**
61
- * Enables smooth fading edge and backdrop blur effect.
62
- * @default false
63
- */
64
- enableFadingBlur?: boolean;
65
- /**
66
- * Custom blur intensity in pixels when `enableFadingBlur` is active.
67
- * @default 12
68
- */
69
- blurIntensity?: number;
70
- /**
71
- * Custom blur height when `enableFadingBlur` is active.
72
- * Defaults to container height.
73
- */
74
- blurHeight?: number | string;
75
- }
76
-
77
- /**
78
- * `<FadingBlurMask>` component renders a smooth gradient fading backdrop blur overlay.
79
- *
80
- * @example
81
- * ```tsx
82
- * <FadingBlurMask direction="top" blurIntensity={16} />
83
- * ```
84
- */
85
- declare function FadingBlurMask({ direction, blurIntensity, blurHeight, color, className, style, children, }: FadingBlurMaskProps): react_jsx_runtime.JSX.Element;
86
-
87
16
  /**
88
17
  * @file app-bar.tokens.ts
89
18
  * MD3 Expressive App Bar — Design tokens ported from:
@@ -1643,6 +1572,19 @@ interface SearchProps {
1643
1572
  * @default false
1644
1573
  */
1645
1574
  hasGap?: boolean;
1575
+ /**
1576
+ * Whether to show the leading search icon.
1577
+ * - When `true` (default): renders `leadingIcon` if provided, else renders the default search icon.
1578
+ * - When `false`: hides the leading icon entirely.
1579
+ * @default true
1580
+ */
1581
+ showLeadingIcon?: boolean;
1582
+ /**
1583
+ * Whether to show the close/back button in the fullscreen SearchView header.
1584
+ * Only applies when `variant="fullscreen"`.
1585
+ * @default true
1586
+ */
1587
+ showCloseButton?: boolean;
1646
1588
  /**
1647
1589
  * Icon rendered at the leading edge of the search input.
1648
1590
  * Defaults to a built-in search icon.
@@ -1760,7 +1702,7 @@ declare function useSearch(): SearchContextValue;
1760
1702
  * Shared `searchId` (React.useId) links SearchBar and SearchView via
1761
1703
  * Framer Motion `layoutId` for seamless animated transitions.
1762
1704
  */
1763
- declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, leadingIcon, trailingIcon, avatar, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): react_jsx_runtime.JSX.Element;
1705
+ declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, showLeadingIcon, showCloseButton, leadingIcon, trailingIcon, avatar, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): react_jsx_runtime.JSX.Element;
1764
1706
  /** MD3 Expressive Search component with `Search.useSearch` context accessor. */
1765
1707
  declare const Search: typeof SearchComponent & {
1766
1708
  useSearch: typeof useSearch;
@@ -1842,7 +1784,7 @@ declare const SEARCH_DOCKED_REVEAL_SPRING: motion.Transition;
1842
1784
  declare const SEARCH_FULLSCREEN_SPRING: motion.Transition;
1843
1785
  declare const SEARCH_BAR_EXIT_SPRING: motion.Transition;
1844
1786
 
1845
- type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
1787
+ type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
1846
1788
  /** KeyDown handler from useSearchKeyboard. */
1847
1789
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1848
1790
  /** Currently highlighted suggestion index (-1 = none). */
@@ -1855,13 +1797,13 @@ type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" |
1855
1797
  * SearchView when active. Wrapped in AnimatePresence with mode="popLayout"
1856
1798
  * so it exits (fades/scales out) before SearchView claims the layoutId.
1857
1799
  */
1858
- declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element;
1800
+ declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, showLeadingIcon, leadingIcon, trailingIcon, avatar, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element;
1859
1801
 
1860
- type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1802
+ type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1861
1803
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1862
1804
  activeIndex: number;
1863
1805
  };
1864
- declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): react_jsx_runtime.JSX.Element;
1806
+ declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, showLeadingIcon, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): react_jsx_runtime.JSX.Element;
1865
1807
 
1866
1808
  /**
1867
1809
  * @file search-view-fullscreen.tsx
@@ -1883,7 +1825,7 @@ declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onAc
1883
1825
  * ESC key closes the view (handled by useSearchKeyboard).
1884
1826
  */
1885
1827
 
1886
- type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1828
+ type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "showLeadingIcon" | "showCloseButton" | "leadingIcon" | "trailingIcon" | "avatar" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
1887
1829
  onKeyDown: (e: React$1.KeyboardEvent) => void;
1888
1830
  activeIndex: number;
1889
1831
  };
@@ -1896,7 +1838,7 @@ type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "
1896
1838
  * Contained style: no divider, background preserved.
1897
1839
  * Divided style: HorizontalDivider between header and results.
1898
1840
  */
1899
- declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React$1.ReactPortal | null;
1841
+ declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, showCloseButton, leadingIcon, trailingIcon, avatar, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React$1.ReactPortal | null;
1900
1842
 
1901
1843
  /**
1902
1844
  * @file tabs.types.ts
@@ -2769,4 +2711,4 @@ declare const ToolbarToggleButtonTokens: {
2769
2711
  readonly Gap: 8;
2770
2712
  };
2771
2713
 
2772
- 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, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FadingBlurDirection, FadingBlurMask, type FadingBlurMaskProps, type FadingBlurProps, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_ELEVATION, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuProps, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
2714
+ 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, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FadingBlurProps, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_ELEVATION, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuProps, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
package/dist/navigation.js CHANGED
@@ -76,7 +76,7 @@ function getMaskGradient(direction) {
76
76
  case "bottom":
77
77
  return "linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
78
78
  case "both":
79
- return "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0) 100%)";
79
+ return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 85%, rgba(0, 0, 0, 1) 100%)";
80
80
  default:
81
81
  return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
82
82
  }
@@ -93,11 +93,16 @@ function FadingBlurMask({
93
93
  const shouldReduceMotion = react.useReducedMotion();
94
94
  const activeBlur = shouldReduceMotion ? 0 : blurIntensity;
95
95
  const maskGradient = getMaskGradient(direction);
96
+ const isFullHeight = direction === "both" || blurHeight === "100%";
97
+ const computedHeight = isFullHeight ? "100%" : typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight;
96
98
  const maskStyle = __spreadValues({
97
99
  position: "absolute",
98
- inset: 0,
100
+ top: direction === "bottom" && !isFullHeight ? "auto" : 0,
101
+ bottom: direction === "top" && !isFullHeight ? "auto" : 0,
102
+ left: 0,
103
+ right: 0,
99
104
  pointerEvents: "none",
100
- height: typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight,
105
+ height: computedHeight,
101
106
  backdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
102
107
  WebkitBackdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
103
108
  maskImage: maskGradient,
@@ -109,7 +114,7 @@ function FadingBlurMask({
109
114
  {
110
115
  "aria-hidden": "true",
111
116
  className: cn(
112
- "absolute inset-0 pointer-events-none z-0 rounded-[inherit]",
117
+ "absolute pointer-events-none z-10 rounded-[inherit]",
113
118
  className
114
119
  ),
115
120
  style: maskStyle,
@@ -1157,7 +1162,7 @@ var IconComponent = React39__namespace.forwardRef(
1157
1162
  (_a, ref) => {
1158
1163
  var _b = _a, {
1159
1164
  name,
1160
- variant = "outlined",
1165
+ variant = "rounded",
1161
1166
  fill = 0,
1162
1167
  weight = 400,
1163
1168
  grade = 0,
@@ -5971,6 +5976,7 @@ var NavigationRailComponent = React39__namespace.forwardRef(
5971
5976
  react.m.div,
5972
5977
  {
5973
5978
  layout: true,
5979
+ transition: SPRING_TRANSITION,
5974
5980
  className: cn(
5975
5981
  "flex w-full flex-col justify-start shrink-0 empty:hidden",
5976
5982
  isExpanded ? "items-start px-3" : "items-center",
@@ -6305,6 +6311,7 @@ function SearchBar({
6305
6311
  onSearch,
6306
6312
  active,
6307
6313
  onActiveChange,
6314
+ showLeadingIcon = true,
6308
6315
  leadingIcon,
6309
6316
  trailingIcon,
6310
6317
  avatar,
@@ -6367,7 +6374,7 @@ function SearchBar({
6367
6374
  layoutId: shouldReduceMotion ? void 0 : searchId,
6368
6375
  transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
6369
6376
  className: cn(
6370
- "relative group select-none",
6377
+ "relative group select-none rounded-full",
6371
6378
  SEARCH_ELEVATION.level3,
6372
6379
  className
6373
6380
  ),
@@ -6407,7 +6414,7 @@ function SearchBar({
6407
6414
  "aria-label": ariaLabel,
6408
6415
  className: "relative flex h-full items-center gap-2 rounded-full px-4",
6409
6416
  children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
6410
- /* @__PURE__ */ jsxRuntime.jsx(
6417
+ showLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
6411
6418
  "span",
6412
6419
  {
6413
6420
  className: "flex shrink-0 items-center justify-center",
@@ -8169,6 +8176,7 @@ function SearchViewDocked({
8169
8176
  onSearch,
8170
8177
  active,
8171
8178
  onActiveChange,
8179
+ showLeadingIcon = true,
8172
8180
  leadingIcon,
8173
8181
  trailingIcon,
8174
8182
  avatar,
@@ -8225,7 +8233,7 @@ function SearchViewDocked({
8225
8233
  className: "flex items-center gap-2 px-4",
8226
8234
  style: { height: SearchTokens.heights.dockedHeader },
8227
8235
  children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
8228
- /* @__PURE__ */ jsxRuntime.jsx(
8236
+ showLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
8229
8237
  "span",
8230
8238
  {
8231
8239
  className: "flex shrink-0 items-center justify-center",
@@ -8320,6 +8328,7 @@ function SearchViewFullScreen({
8320
8328
  onSearch,
8321
8329
  active,
8322
8330
  onActiveChange,
8331
+ showCloseButton = true,
8323
8332
  leadingIcon,
8324
8333
  trailingIcon,
8325
8334
  avatar,
@@ -8386,7 +8395,7 @@ function SearchViewFullScreen({
8386
8395
  className: "flex shrink-0 items-center gap-2 px-4",
8387
8396
  style: { height: SearchTokens.heights.fullScreenHeader },
8388
8397
  children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
8389
- /* @__PURE__ */ jsxRuntime.jsx(
8398
+ showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
8390
8399
  IconButton,
8391
8400
  {
8392
8401
  size: "sm",
@@ -8487,6 +8496,8 @@ function SearchComponent({
8487
8496
  variant = "docked",
8488
8497
  styleType = "contained",
8489
8498
  hasGap = false,
8499
+ showLeadingIcon = true,
8500
+ showCloseButton = true,
8490
8501
  leadingIcon,
8491
8502
  trailingIcon,
8492
8503
  avatar,
@@ -8515,6 +8526,7 @@ function SearchComponent({
8515
8526
  onSearch,
8516
8527
  active,
8517
8528
  onActiveChange,
8529
+ showLeadingIcon,
8518
8530
  leadingIcon,
8519
8531
  trailingIcon,
8520
8532
  avatar,
@@ -8531,6 +8543,7 @@ function SearchComponent({
8531
8543
  variant === "fullscreen" ? /* @__PURE__ */ jsxRuntime.jsx(
8532
8544
  SearchViewFullScreen,
8533
8545
  __spreadProps(__spreadValues({}, sharedProps), {
8546
+ showCloseButton,
8534
8547
  styleType,
8535
8548
  viewClassName,
8536
8549
  children