@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/src/icon/styles.ts

@@ -2,12 +2,16 @@ import { cnb } from "cnbuilder";
 
 import { type TextColor, type ThemeColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
-import type { MaterialIconFamily, MaterialSymbolFamily } from "./material.js";
+import {
+  type MaterialIconFamily,
+  type MaterialSymbolFamily,
+} from "./material.js";
 
 declare module "react" {
   interface CSSProperties {
     "--rmd-icon-color"?: string;
     "--rmd-icon-size"?: string | number;
+    "--rmd-icon-dense-size"?: string | number;
     "--rmd-icon-spacing"?: string | number;
     "--rmd-icon-rotate-from"?: string | number;
     "--rmd-icon-rotate-to"?: string | number;

package/src/interaction/Ripple.tsx

@@ -11,19 +11,19 @@ import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { type RippleState, type RippleTransitionCallbacks } from "./types.js";
 
 /** @internal */
-export const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+export const DEFAULT_RIPPLE_CLASSNAMES = {
   enter: "rmd-ripple--animating",
   enterActive: "rmd-ripple--scaling",
   enterDone: "rmd-ripple--animating rmd-ripple--scaling",
   exit: "rmd-ripple--animating rmd-ripple--scaling",
   exitActive: "rmd-ripple--fading",
-};
+} as const satisfies CSSTransitionClassNames;
 
 /** @internal */
-export const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = {
+export const DEFAULT_RIPPLE_TIMEOUT = {
   enter: 150,
   exit: 300,
-};
+} as const satisfies TransitionTimeout;
 
 /** @internal */
 export interface RippleProps extends RippleTransitionCallbacks {

package/src/interaction/UserInteractionModeProvider.tsx

@@ -65,7 +65,7 @@ export interface UserInteractionModeProviderProps {
  * @example Mount at the root of your app
  * ```tsx
  * import { createRoot } from "react-dom/client";
- * import { UserInteractionModeProvider } from "@react-md/core";
+ * import { UserInteractionModeProvider } from "@react-md/core/interaction/UserInteractionModeProvider";
  * import App from "./App":
  *
  * const container = document.getElementById("root");

package/src/layout/LayoutAppBar.tsx

@@ -61,6 +61,7 @@ export interface LayoutAppBarProps extends AppBarProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.

package/src/layout/LayoutNav.tsx

@@ -65,12 +65,10 @@ export interface LayoutNavProps
  * @example Full Height Layout
  * ```tsx
  * "use client";
- * import {
- *   LayoutAppBar,
- *   LayoutNav,
- *   Main,
- *   useHorizontalLayoutTransition,
- * } from "@react-md/core";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useHorizontalLayoutTransition } from "@react-md/core/layout/useHorizontalLayoutTransition";
  * import type { ReactElement, PropsWithChildren } from "react";
  *
  * function Layout({ children }: PropsWithChildren): ReactElement {
@@ -97,12 +95,10 @@ export interface LayoutNavProps
  * @example Toggleable Layout
  * ```tsx
  * "use client";
- * import {
- *   LayoutNav,
- *   Main,
- *   useHorizontalLayoutTransition,
- *   useToggle,
- * } from "@react-md/core";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useHorizontalLayoutTransition } from "@react-md/core/layout/useHorizontalLayoutTransition";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
  * import { cnb } from "cnbuilder";
  * import type { ReactElement, PropsWithChildren } from "react";
@@ -136,6 +132,7 @@ export interface LayoutNavProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(

package/src/layout/LayoutWindowSplitter.tsx

@@ -43,14 +43,12 @@ export interface LayoutWindowSplitterProps
  *
  * @example Dynamic Resizing
  * ```tsx
- * import {
- *   LayoutNav,
- *   LayoutWindowSplitter,
- *   Main,
- *   NoSsr,
- *   useWindowSize,
- *   useWindowSplitter,
- * } from "@react-md/core";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { LayoutWindowSplitter } from "@react-md/core/layout/LayoutWindowSplitter";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { NoSsr } from "@react-md/core/NoSsr";
+ * import { useWindowSplitter } from "@react-md/core/window-splitter/useWindowSplitter";
+ * import { useWindowSize } from "@react-md/core/useWindowSize";
  * import type { ReactElement, PropsWithChildren } from "react"
  *
  * function MyWindowSplitter(): ReactElement {
@@ -91,6 +89,7 @@ export interface LayoutWindowSplitterProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export const LayoutWindowSplitter = forwardRef<

package/src/layout/Main.tsx

@@ -46,7 +46,7 @@ export interface MainProps
  *
  * @example Styles Only
  * ```tsx
- * import { main as mainStyles } from "@react-md/core":
+ * import { main as mainStyles } from "@react-md/core/layout/mainStyles":
  *
  * function MyCustomMainElement({ children }) {
  *   return (
@@ -62,6 +62,7 @@ export interface MainProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */

package/src/layout/useExpandableLayout.ts

@@ -205,6 +205,7 @@ export interface ExpandableLayoutImplementation
  *   );
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  * @see {@link useResizableLayout}
  */

package/src/layout/useHorizontalLayoutTransition.ts

@@ -20,7 +20,7 @@ export const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {
   enterActive: "rmd-layout-h--active",
   enterDone: "rmd-layout-h--active",
   exit: "rmd-layout-h--exit",
-} satisfies Readonly<CSSTransitionClassNames>;
+} as const satisfies CSSTransitionClassNames;
 
 /**
  * @since 6.0.0
@@ -42,7 +42,9 @@ export interface HorizontalLayoutTransitionOptions
 /**
  * @example
  * ```tsx
- * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from "@react-md/core";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useHorizontalLayoutTransition } from "@react-md/core/layout/useHorizontalLayoutTransition";
  * import type { ReactElement, ReactNode } from "react";
  *
  * interface Props {
@@ -76,6 +78,7 @@ export interface HorizontalLayoutTransitionOptions
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export function useHorizontalLayoutTransition<

package/src/layout/useLayoutAppBarHeight.ts

@@ -24,12 +24,10 @@ export interface LayoutAppBarHeightResult {
 /**
  * @example Main Usage
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -45,12 +43,10 @@ export interface LayoutAppBarHeightResult {
  *
  * @example Inline Variables
  * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
  * import type { PropsWithChildren, ReactElement } from "react";
- * import {
- *   AppBar,
- *   useCSSVariables,
- *   useLayoutAppBarHeight
- * } from "@react-md/core";
  *
  * export function Layout({ children }: PropsWithChildren): ReactElement {
  *   const { appBarRef, variables } = useLayoutAppBarHeight();
@@ -67,6 +63,7 @@ export interface LayoutAppBarHeightResult {
  * };
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export function useLayoutAppBarHeight(

package/src/layout/useLayoutTree.ts

@@ -168,6 +168,9 @@ export interface LayoutTreeImplementation<
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}
  * @since 6.0.0 Renamed from `useLayoutNavigation`.
  */
 export function useLayoutTree(

package/src/layout/useLayoutWindowSplitter.ts

@@ -75,8 +75,9 @@ export interface LayoutWindowSplitterImplementation
  *
  * @example Without this hook
  * ```tsx
- * import { useWindowSize, useWindowSplitter } from "@react-md/core";
- * import type { ProvidedLayoutWindowSplitterProps } from "@react-md/core";
+ * import { type ProvidedLayoutWindowSplitterProps } from "@react-md/core/layout/useLayoutWindowSplitter";
+ * import { useWindowSplitter } from "@react-md/core/window-splitter/useWindowSplitter";
+ * import { useWindowSize } from "@react-md/core/useWindowSize.js";
  *
  * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {
  *   const { width } = useWindowSize({ disableHeight: true });
@@ -104,6 +105,7 @@ export interface LayoutWindowSplitterImplementation
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @see {@link useResizableLayout} For a pre-built solution.
  * @since 6.0.0
  */

package/src/layout/useResizableLayout.ts

@@ -150,6 +150,7 @@ export interface ResizableLayoutImplementation
  *   )
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export function useResizableLayout(
@@ -160,6 +161,7 @@ export function useResizableLayout(
     pathname,
     appBarPosition = "fixed",
     fullHeightNav = false,
+    temporaryUntil,
     defaultVisible,
     defaultExpanded,
     ...splitterOptions
@@ -170,6 +172,7 @@ export function useResizableLayout(
   const expandableLayout = useExpandableLayout({
     pathname,
     appBarPosition,
+    temporaryUntil,
     fullHeightNav,
     defaultExpanded,
     defaultVisible,

package/src/layout/useTemporaryLayout.ts

@@ -122,6 +122,7 @@ export interface TemporaryLayoutImplementation {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
 export function useTemporaryLayout(

package/src/link/Link.tsx

@@ -51,7 +51,8 @@ export interface LinkProps
 /**
  * @example Simple Example
  * ```tsx
- * import { Link, Typography } from "@react-md/core";
+ * import { Link } from "@react-md/core/link/Link";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Element(): ReactElement {
@@ -65,6 +66,7 @@ export interface LinkProps
  * ```
  *
  *
+ * @see {@link https://next.react-md.dev/components/link | Link Demos}
  * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
  * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.
  * @since 6.0.0 Removed the `component` prop since all you need for link

package/src/link/SkipToMainContent.tsx

@@ -48,6 +48,28 @@ export interface SkipToMainContentProps
 /**
  * **Client Component**
  *
+ * This component is used to allow keyboard users a quick way to skip directly
+ * to the main content instead of needing to tab through all navigation items.
+ *
+ * This component should not be used if using the LayoutAppBar component since
+ * it is already built-in.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { AppBar } from "@react-md/core/app-bar/AppBar";
+ * import { SkipToMainContent } from "@react-md/core/link/SkipToMainContent";
+ * import { type ReactElement } from "react";
+ *
+ * export default function SimpleSkipToMainContentExample(): ReactElement {
+ *   return (
+ *     <AppBar style={{ position: "relative" }}>
+ *       <SkipToMainContent />
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}
  * @since 6.0.0 Changed the default `id` from `"skip-to-main-content"` to
  * `"skip-to-main"`.
  * @since 6.0.0 The `mainId` prop is optional

package/src/list/List.tsx

@@ -2,6 +2,13 @@ import { type HTMLAttributes, forwardRef } from "react";
 
 import { list } from "./listStyles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-padding-h"?: string | number;
+    "--rmd-list-padding-v"?: string | number;
+  }
+}
+
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
 export interface ListProps extends HTMLAttributes<ListElement> {
@@ -40,7 +47,9 @@ export interface ListProps extends HTMLAttributes<ListElement> {
  *
  * @example Simple Example
  * ```tsx
- * import { List, ListItem, ListItemLink } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
+ * import { ListItemLink } from "@react-md/core/list/ListItemLink";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -72,6 +81,8 @@ export interface ListProps extends HTMLAttributes<ListElement> {
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export const List = forwardRef<ListElement, ListProps>(
   function List(props, ref) {

package/src/list/ListItem.tsx

@@ -10,6 +10,23 @@ import { getListItemHeight } from "./getListItemHeight.js";
 import { listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-item-keyline"?: string | number;
+    "--rmd-list-item-padding-h"?: string | number;
+    "--rmd-list-item-padding-v"?: string | number;
+    "--rmd-list-item-height"?: string | number;
+    "--rmd-list-item-medium-height"?: string | number;
+    "--rmd-list-item-large-height"?: string | number;
+    "--rmd-list-item-extra-large-height"?: string | number;
+    "--rmd-list-item-multiline-clamp"?: string | number;
+    "--rmd-list-item-multiline-height"?: string | number;
+    "--rmd-list-item-media-size"?: string | number;
+    "--rmd-list-item-media-spacing"?: string | number;
+    "--rmd-list-item-text-multiline-height"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.
@@ -70,7 +87,8 @@ export interface ListItemProps
  *
  * @example Simple Example
  * ```tsx
- * import { List, ListItem } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
  * import type { ReactElement  } from "react";
  *
  * function Example(): ReactElement {
@@ -99,7 +117,8 @@ export interface ListItemProps
  *
  * @example Applying Addons Example
  * ```tsx
- * import { List, ListItem } from "@react-md/core";
+ * import { List } from "@react-md/core/list/List";
+ * import { ListItem } from "@react-md/core/list/ListItem";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement  } from "react";
  *
@@ -124,6 +143,8 @@ export interface ListItemProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   function ListItem(props, ref) {

package/src/list/ListItemChildren.tsx

@@ -17,7 +17,7 @@ import { type ListItemChildrenProps } from "./types.js";
  *
  * @example Custom Component Usage
  * ```tsx
- * import { ListItemChildren } from "@react-md/core";
+ * import { ListItemChildren } from "@react-md/core/list/ListItemChildren";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  * import type { ReactElement } from "react";
  *
@@ -36,6 +36,8 @@ import { type ListItemChildrenProps } from "./types.js";
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export function ListItemChildren(props: ListItemChildrenProps): ReactElement {
   const {

package/src/list/ListItemLink.tsx

@@ -50,7 +50,38 @@ export interface ListItemLinkProps
 /**
  * **Client Component**
  *
- * The `ListItemLink` should be used to render links within the `List` component.
+ * The `ListItemLink` should be used to render links within the `List`, `Menu`,
+ * or `DropdownMenu` components.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { List } from "@react-md/core/list/list";
+ * import { ListItemLink } from "@react-md/core/list/ListItemLink";
+ *
+ * function Example() {
+ *   return (
+ *     <List>
+ *       <ListItemLink href="#">Some Link</ListItemLink>
+ *     </List>
+ *   );
+ * }
+ * ```
+ *
+ * @example In Menus
+ * ```tsx
+ * import { ListItemLink } from "@react-md/core/list/ListItemLink";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ *
+ * function Example() {
+ *   return (
+ *     <DropdownMenu buttonChildren="Hello">
+ *       <ListItemLink role="menuitem" href="#">Some Link</ListItemLink>
+ *     </List>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
   function ListItemLink(props, ref) {

package/src/list/ListSubheader.tsx

@@ -51,6 +51,8 @@ export interface ListSubheaderProps
 /**
  * The `ListSubheader` is a wrapper for the `<li>` element to apply subheader
  * typography styles and {@link ListItemText} layout.
+ *
+ * @see {@link https://next.react-md.dev/components/list | List Demos}
  */
 export const ListSubheader = forwardRef<HTMLLIElement, ListSubheaderProps>(
   function ListSubheader(props, ref) {

package/src/list/listItemStyles.ts

@@ -8,23 +8,6 @@ import {
   type ListItemHeight,
 } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-item-keyline"?: string | number;
-    "--rmd-list-item-padding-h"?: string | number;
-    "--rmd-list-item-padding-v"?: string | number;
-    "--rmd-list-item-height"?: string | number;
-    "--rmd-list-item-medium-height"?: string | number;
-    "--rmd-list-item-large-height"?: string | number;
-    "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-multiline-clamp"?: string | number;
-    "--rmd-list-item-multiline-height"?: string | number;
-    "--rmd-list-item-media-size"?: string | number;
-    "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-multiline-height"?: string | number;
-  }
-}
-
 const styles = bem("rmd-list-item");
 
 /** @since 6.0.0 */

package/src/list/listStyles.ts

@@ -2,13 +2,6 @@ import { cnb } from "cnbuilder";
 
 import { bem } from "../utils/bem.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
-
 const styles = bem("rmd-list");
 
 /** @since 6.0.0 */

package/src/media-queries/AppSizeProvider.tsx

@@ -88,6 +88,8 @@ export interface AppSizeProviderProps extends AppSizeQueries {
  * This component should be mounted near the root of your app to determine the
  * current app size based on different media queries.
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @since 6.0.0 Renamed from `AppSizeListener`
  */
 export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {

package/src/media-queries/useMediaQuery.ts

@@ -17,6 +17,8 @@ import { useSsr } from "../SsrProvider.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-media-query | useMediaQuery Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @param query - The media query to use
  * @param disabled - When `true`, the `window.matchMedia` API will not be
  * activated and the hook will return the last cached value.

package/src/menu/DropdownMenu.tsx

@@ -68,7 +68,8 @@ export type DropdownMenuProps = DropdownMenuButtonProps &
  * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
- * import { DropdownMenu, MenuItem } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItem } from "@react-md/core/menu/MenuItem";
  *
  * function Example() {
  *   return (
@@ -87,7 +88,8 @@ export type DropdownMenuProps = DropdownMenuButtonProps &
  * @example Nested Dropdown Menus
  * ```tsx
  * import type { ReactElement } from "react";
- * import { DropdownMenu, MenuItem } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItem } from "@react-md/core/menu/MenuItem";
  *
  * function Example() {
  *   return (
@@ -111,6 +113,7 @@ export type DropdownMenuProps = DropdownMenuButtonProps &
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  * @since 6.0.0 Updated to use the latest menu API.
  */

package/src/menu/Menu.tsx

@@ -267,6 +267,7 @@ export interface MenuProps
  *
  * @see The `useContextMenu` hook for an example.
  *
+ * @see {@link https://next.react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  * @since 6.0.0 Updated this component to implement all the `Menu`
  * functionality instead of requiring the `useMenu` hook and `MenuWidget`

package/src/menu/MenuBar.tsx

@@ -39,7 +39,9 @@ export interface MenuBarProps extends Omit<ListProps, "role"> {
  *
  * @example Simple Example
  * ```tsx
- * import { DropdownMenu, MenuBar, MenuItem } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuBar } from "@react-md/core/menu/MenuBar";
+ * import { MenuItem } from "@react-md/core/menu/MenuItem";
  * import type { ReactElement } from "react";
  *
  * export function SimpleExample(): ReactElement {
@@ -65,6 +67,7 @@ export interface MenuBarProps extends Omit<ListProps, "role"> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  * @since 6.0.0 Combined with the previous `MenuBarWidget`
  */

package/src/menu/MenuButton.tsx

@@ -59,6 +59,7 @@ export interface MenuButtonProps extends ButtonProps, BaseMenuButtonProps {}
  * An internal component that handles rendering a button for the `DropdownMenu`
  * while implementing the correct accessibility and keyboard movement.
  *
+ * @see {@link https://next.react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  * @since 6.0.0 See {@link BaseMenuButtonProps} for breaking changes.
  */

package/src/menu/MenuItem.tsx

@@ -29,6 +29,7 @@ export interface MenuItemProps extends Omit<ListItemProps, "role"> {
  * implements some keyboard focus behavior. This component should generally have
  * an `onClick` event handler.
  *
+ * @see {@link https://next.react-md.dev/components/menu | Menu Demos}
  * @since 5.0.0
  */
 export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(

package/src/menu/MenuItemCircularProgress.tsx

@@ -36,12 +36,10 @@ export interface MenuItemCircularProgressProps extends CircularProgressProps {
  * @example Simple Example
  * ```tsx
  * "use client";
- * import {
- *   DropdownMenu,
- *   MenuItem,
- *   MenuItemCircularProgress,
- *   useAsyncFunction,
- * } from "@react-md/core";
+ * import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
+ * import { MenuItem } from "@react-md/core/menu/MenuItem";
+ * import { MenuItemCircularProgress } from "@react-md/core/menu/MenuItemCircularProgress";
+ * import { useAsyncFunction } from "@react-md/core/useAsyncFunction";
  *
  * function Example() {
  *   const { handleAsync, pending } = useAsyncFunction();