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

package/dist/navigation/NavGroup.d.ts

@@ -11,6 +11,7 @@ export interface NavGroupProps extends ListProps {
  * A simple wrapper around the {@link Link} component that ads the
  * `--rmd-tree-depth: depth` custom property to allow for incremented padding.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare const NavGroup: import("react").ForwardRefExoticComponent<NavGroupProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/navigation/NavGroup.js

@@ -6,6 +6,7 @@ import { navGroup } from "./navGroupStyles.js";
  * A simple wrapper around the {@link Link} component that ads the
  * `--rmd-tree-depth: depth` custom property to allow for incremented padding.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export const NavGroup = /*#__PURE__*/ forwardRef(function NavGroup(props, ref) {
     const { style, depth, className, children, ...remaining } = props;

package/dist/navigation/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavGroup.tsx"],"sourcesContent":["import { type ReactNode, forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport { navGroup } from \"./navGroupStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavGroupProps extends ListProps {\n  depth: number;\n  children: ReactNode;\n}\n\n/**\n * A simple wrapper around the {@link Link} component that ads the\n * `--rmd-tree-depth: depth` custom property to allow for incremented padding.\n *\n * @since 6.0.0\n */\nexport const NavGroup = forwardRef<HTMLUListElement, NavGroupProps>(\n  function NavGroup(props, ref) {\n    const { style, depth, className, children, ...remaining } = props;\n\n    return (\n      <List\n        {...remaining}\n        ref={ref}\n        style={{ ...style, \"--rmd-tree-depth\": depth }}\n        className={navGroup({\n          className,\n          disablePadding: depth > 0,\n        })}\n      >\n        {children}\n      </List>\n    );\n  }\n);\n"],"names":["forwardRef","List","navGroup","NavGroup","props","ref","style","depth","className","children","remaining","disablePadding"],"mappings":";AAAA,SAAyBA,UAAU,QAAQ,QAAQ;AAEnD,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAU/C;;;;;CAKC,GACD,OAAO,MAAMC,yBAAWH,WACtB,SAASG,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAE5D,qBACE,KAACH;QACE,GAAGS,SAAS;QACbL,KAAKA;QACLC,OAAO;YAAE,GAAGA,KAAK;YAAE,oBAAoBC;QAAM;QAC7CC,WAAWN,SAAS;YAClBM;YACAG,gBAAgBJ,QAAQ;QAC1B;kBAECE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/navigation/NavGroup.tsx"],"sourcesContent":["import { type ReactNode, forwardRef } from \"react\";\n\nimport { List, type ListProps } from \"../list/List.js\";\nimport { navGroup } from \"./navGroupStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavGroupProps extends ListProps {\n  depth: number;\n  children: ReactNode;\n}\n\n/**\n * A simple wrapper around the {@link Link} component that ads the\n * `--rmd-tree-depth: depth` custom property to allow for incremented padding.\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavGroup = forwardRef<HTMLUListElement, NavGroupProps>(\n  function NavGroup(props, ref) {\n    const { style, depth, className, children, ...remaining } = props;\n\n    return (\n      <List\n        {...remaining}\n        ref={ref}\n        style={{ ...style, \"--rmd-tree-depth\": depth }}\n        className={navGroup({\n          className,\n          disablePadding: depth > 0,\n        })}\n      >\n        {children}\n      </List>\n    );\n  }\n);\n"],"names":["forwardRef","List","navGroup","NavGroup","props","ref","style","depth","className","children","remaining","disablePadding"],"mappings":";AAAA,SAAyBA,UAAU,QAAQ,QAAQ;AAEnD,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAU/C;;;;;;CAMC,GACD,OAAO,MAAMC,yBAAWH,WACtB,SAASG,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAE5D,qBACE,KAACH;QACE,GAAGS,SAAS;QACbL,KAAKA;QACLC,OAAO;YAAE,GAAGA,KAAK;YAAE,oBAAoBC;QAAM;QAC7CC,WAAWN,SAAS;YAClBM;YACAG,gBAAgBJ,QAAQ;QAC1B;kBAECE;;AAGP,GACA"}

package/dist/navigation/NavItem.d.ts

@@ -10,6 +10,7 @@ export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
  * and should not be used on its own. See the `CollapsibleNavGroup` and
  * `NavItemLink` instead.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/navigation/NavItem.js

@@ -6,6 +6,7 @@ import { navItem } from "./navItemStyles.js";
  * and should not be used on its own. See the `CollapsibleNavGroup` and
  * `NavItemLink` instead.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export const NavItem = /*#__PURE__*/ forwardRef(function NavItem(props, ref) {
     const { className, children, ...remaining } = props;

package/dist/navigation/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const { className, children, ...remaining } = props;\n    return (\n      <li {...remaining} ref={ref} className={navItem({ className })}>\n        {children}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,OAAO,QAAQ,qBAAqB;AAS7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const { className, children, ...remaining } = props;\n    return (\n      <li {...remaining} ref={ref} className={navItem({ className })}>\n        {children}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,OAAO,QAAQ,qBAAqB;AAS7C;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}

package/dist/navigation/NavItemButton.d.ts

@@ -21,6 +21,7 @@ export interface NavItemButtonProps extends Omit<ButtonProps, "children">, NavIt
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare const NavItemButton: import("react").ForwardRefExoticComponent<NavItemButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/navigation/NavItemButton.js

@@ -11,6 +11,7 @@ import { navItemContent } from "./navItemStyles.js";
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export const NavItemButton = /*#__PURE__*/ forwardRef(function NavItemButton(props, ref) {
     const { className, collapsed, icon, iconRotatorProps, disableIconRotator, children, beforeAddon, afterAddon, spanProps, onBlur, onContextMenu, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart, tooltipOptions, ...remaining } = props;

package/dist/navigation/NavItemButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type MouseEventHandler, type ReactNode, forwardRef } from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorBaseProps, \"rotated\">;\n  disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n  extends Omit<ButtonProps, \"children\">,\n    NavItemButtonRotatorProps,\n    NavItemContentProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n  function NavItemButton(props, ref) {\n    const {\n      className,\n      collapsed,\n      icon,\n      iconRotatorProps,\n      disableIconRotator,\n      children,\n      beforeAddon,\n      afterAddon,\n      spanProps,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      ...remaining\n    } = props;\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    return (\n      <>\n        <Button\n          aria-expanded={!collapsed}\n          {...remaining}\n          {...elementProps}\n          ref={ref}\n          className={navItemContent({ className })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {!disableIconRotator && (\n            <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n              {getIcon(\"dropdown\", icon)}\n            </IconRotator>\n          )}\n        </Button>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </>\n    );\n  }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","aria-expanded","span","textOverflow","rotated"],"mappings":"AAAA;;AAEA,SAAiDA,UAAU,QAAQ,QAAQ;AAE3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAwBpD;;;;CAIC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACCiC,iBAAe,CAACtB;gBACf,GAAGgB,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACkB;wBACE,GAAGhB,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtByB,cAAc;wBAChB;kCAECpB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEuB,SAAS,CAACzB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type MouseEventHandler, type ReactNode, forwardRef } from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorBaseProps, \"rotated\">;\n  disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n  extends Omit<ButtonProps, \"children\">,\n    NavItemButtonRotatorProps,\n    NavItemContentProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n  function NavItemButton(props, ref) {\n    const {\n      className,\n      collapsed,\n      icon,\n      iconRotatorProps,\n      disableIconRotator,\n      children,\n      beforeAddon,\n      afterAddon,\n      spanProps,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      ...remaining\n    } = props;\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      onBlur,\n      onContextMenu,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    return (\n      <>\n        <Button\n          aria-expanded={!collapsed}\n          {...remaining}\n          {...elementProps}\n          ref={ref}\n          className={navItemContent({ className })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {!disableIconRotator && (\n            <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n              {getIcon(\"dropdown\", icon)}\n            </IconRotator>\n          )}\n        </Button>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </>\n    );\n  }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","aria-expanded","span","textOverflow","rotated"],"mappings":"AAAA;;AAEA,SAAiDA,UAAU,QAAQ,QAAQ;AAE3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAwBpD;;;;;CAKC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACCiC,iBAAe,CAACtB;gBACf,GAAGgB,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACkB;wBACE,GAAGhB,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtByB,cAAc;wBAChB;kCAECpB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEuB,SAAS,CAACzB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}

package/dist/navigation/NavItemLink.d.ts

@@ -36,6 +36,7 @@ export interface NavItemLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEl
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare const NavItemLink: import("react").ForwardRefExoticComponent<NavItemLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/navigation/NavItemLink.js

@@ -11,6 +11,7 @@ import { navItemLink } from "./navItemStyles.js";
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export const NavItemLink = /*#__PURE__*/ forwardRef(function NavItemLink(props, propRef) {
     const { as: Component = "a", href, active, activeClassName, beforeAddon, afterAddon, className, children, liProps, spanProps, disabled = !href, onClick, onBlur, onDragStart, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseUp, onTouchMove, onTouchEnd, onTouchStart, tooltipOptions, disableRipple, disableScrollIntoView, ...remaining } = props;

package/dist/navigation/NavItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AnchorHTMLAttributes,\n  type LiHTMLAttributes,\n  forwardRef,\n  useEffect,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n  type NavItemContentProps,\n  type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n    NavItemContentProps,\n    ComponentWithRippleProps {\n  /** @defaultValue `\"a\"` */\n  as?: NavigationLinkComponent;\n  href: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Set this to `true` if the link matches the current `pathname`. This will\n   * enable `aria-current=\"true\"` and apply active styling.\n   */\n  active: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n\n  /** @defaultValue `!to && !href` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` to prevent this item from scrolling into view when it\n   * becomes active. It is generally recommended to keep this `false` unless a\n   * custom implementation has been added so that when the temporary navigation\n   * will show the active route.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n  function NavItemLink(props, propRef) {\n    const {\n      as: Component = \"a\",\n      href,\n      active,\n      activeClassName,\n      beforeAddon,\n      afterAddon,\n      className,\n      children,\n      liProps,\n      spanProps,\n      disabled = !href,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      disableRipple,\n      disableScrollIntoView,\n      ...remaining\n    } = props;\n\n    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n    const { handlers, ripples } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      ...handlers,\n    });\n    useEffect(() => {\n      const link = linkRef.current;\n      if (\n        !active ||\n        !link ||\n        disableScrollIntoView ||\n        document.activeElement === link ||\n        // do not scroll into view if the collapse transition is occurring since\n        // it makes it animate weirdly\n        link.closest(\".rmd-collapse--enter\")\n      ) {\n        return;\n      }\n\n      link.scrollIntoView({ block: \"center\" });\n    }, [active, disableScrollIntoView, linkRef]);\n\n    return (\n      <NavItem {...liProps}>\n        <Component\n          aria-current={active ? \"page\" : undefined}\n          {...remaining}\n          {...handlers}\n          {...elementProps}\n          ref={linkRefCallback}\n          href={href}\n          className={navItemLink({\n            active,\n            activeClassName,\n            className,\n          })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {ripples}\n        </Component>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </NavItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableRipple","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","mode","undefined","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","closest","scrollIntoView","block","aria-current","ref","span","textOverflow"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,EACVC,SAAS,QACJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA8CjD;;;;CAIC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,aAAa,EACbC,qBAAqB,EACrB,GAAGC,WACJ,GAAG5B;IAEJ,MAAM,CAAC6B,SAASC,gBAAgB,GAAGlC,cAAcK;IACjD,MAAM,EAAE8B,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QAClDwC,MAAMP,gBAAgB,SAASQ;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEW,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAG1C,WAAW;QAC7D2C,cAAc;QACdC,iBAAiB;QACjB,GAAGd,cAAc;QACjB,GAAGM,QAAQ;IACb;IACAxC,UAAU;QACR,MAAMiD,OAAOX,QAAQY,OAAO;QAC5B,IACE,CAACpC,UACD,CAACmC,QACDb,yBACAe,SAASC,aAAa,KAAKH,QAC3B,wEAAwE;QACxE,8BAA8B;QAC9BA,KAAKI,OAAO,CAAC,yBACb;YACA;QACF;QAEAJ,KAAKK,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACzC;QAAQsB;QAAuBE;KAAQ;IAE3C,qBACE,MAAChC;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACC4C,gBAAc1C,SAAS,SAAS6B;gBAC/B,GAAGN,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGI,YAAY;gBAChBa,KAAKlB;gBACL1B,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAAC0C;wBACE,GAAGrC,SAAS;wBACboC,KAAKX;wBACL5B,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtByC,cAAc;wBAChB;kCAECxC;;oBAEFF;oBACAwB;;;0BAEH,KAACtC;gBAAS,GAAG0C,YAAY;0BAAG1B;;;;AAGlC,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AnchorHTMLAttributes,\n  type LiHTMLAttributes,\n  forwardRef,\n  useEffect,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n  type NavItemContentProps,\n  type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n    NavItemContentProps,\n    ComponentWithRippleProps {\n  /** @defaultValue `\"a\"` */\n  as?: NavigationLinkComponent;\n  href: string;\n\n  /**\n   * Any additional props to provide the wrapping `<li>` element such as\n   * `style`, `className`, and `ref`.\n   */\n  liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Set this to `true` if the link matches the current `pathname`. This will\n   * enable `aria-current=\"true\"` and apply active styling.\n   */\n  active: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n\n  /** @defaultValue `!to && !href` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` to prevent this item from scrolling into view when it\n   * becomes active. It is generally recommended to keep this `false` unless a\n   * custom implementation has been added so that when the temporary navigation\n   * will show the active route.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n  function NavItemLink(props, propRef) {\n    const {\n      as: Component = \"a\",\n      href,\n      active,\n      activeClassName,\n      beforeAddon,\n      afterAddon,\n      className,\n      children,\n      liProps,\n      spanProps,\n      disabled = !href,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n      tooltipOptions,\n      disableRipple,\n      disableScrollIntoView,\n      ...remaining\n    } = props;\n\n    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n    const { handlers, ripples } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      disabled,\n      onClick,\n      onBlur,\n      onDragStart,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseUp,\n      onTouchMove,\n      onTouchEnd,\n      onTouchStart,\n    });\n\n    const { elementProps, tooltipProps, overflowRef } = useTooltip({\n      overflowOnly: true,\n      defaultPosition: \"right\",\n      ...tooltipOptions,\n      ...handlers,\n    });\n    useEffect(() => {\n      const link = linkRef.current;\n      if (\n        !active ||\n        !link ||\n        disableScrollIntoView ||\n        document.activeElement === link ||\n        // do not scroll into view if the collapse transition is occurring since\n        // it makes it animate weirdly\n        link.closest(\".rmd-collapse--enter\")\n      ) {\n        return;\n      }\n\n      link.scrollIntoView({ block: \"center\" });\n    }, [active, disableScrollIntoView, linkRef]);\n\n    return (\n      <NavItem {...liProps}>\n        <Component\n          aria-current={active ? \"page\" : undefined}\n          {...remaining}\n          {...handlers}\n          {...elementProps}\n          ref={linkRefCallback}\n          href={href}\n          className={navItemLink({\n            active,\n            activeClassName,\n            className,\n          })}\n        >\n          {beforeAddon}\n          <span\n            {...spanProps}\n            ref={overflowRef}\n            className={cssUtils({\n              className: spanProps?.className,\n              textOverflow: \"ellipsis\",\n            })}\n          >\n            {children}\n          </span>\n          {afterAddon}\n          {ripples}\n        </Component>\n        <Tooltip {...tooltipProps}>{children}</Tooltip>\n      </NavItem>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableRipple","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","mode","undefined","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","closest","scrollIntoView","block","aria-current","ref","span","textOverflow"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,EACVC,SAAS,QACJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA8CjD;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,aAAa,EACbC,qBAAqB,EACrB,GAAGC,WACJ,GAAG5B;IAEJ,MAAM,CAAC6B,SAASC,gBAAgB,GAAGlC,cAAcK;IACjD,MAAM,EAAE8B,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QAClDwC,MAAMP,gBAAgB,SAASQ;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEW,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAG1C,WAAW;QAC7D2C,cAAc;QACdC,iBAAiB;QACjB,GAAGd,cAAc;QACjB,GAAGM,QAAQ;IACb;IACAxC,UAAU;QACR,MAAMiD,OAAOX,QAAQY,OAAO;QAC5B,IACE,CAACpC,UACD,CAACmC,QACDb,yBACAe,SAASC,aAAa,KAAKH,QAC3B,wEAAwE;QACxE,8BAA8B;QAC9BA,KAAKI,OAAO,CAAC,yBACb;YACA;QACF;QAEAJ,KAAKK,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACzC;QAAQsB;QAAuBE;KAAQ;IAE3C,qBACE,MAAChC;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACC4C,gBAAc1C,SAAS,SAAS6B;gBAC/B,GAAGN,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGI,YAAY;gBAChBa,KAAKlB;gBACL1B,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAAC0C;wBACE,GAAGrC,SAAS;wBACboC,KAAKX;wBACL5B,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtByC,cAAc;wBAChB;kCAECxC;;oBAEFF;oBACAwB;;;0BAEH,KAACtC;gBAAS,GAAG0C,YAAY;0BAAG1B;;;;AAGlC,GACA"}

package/dist/navigation/NavSubheader.d.ts

@@ -7,6 +7,7 @@ export type NavSubheaderProps = ListSubheaderProps;
  * A simple wrapper around the {@link ListSubheader} that updates the padding
  * based on the current navigation item depth to match the other items.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare const NavSubheader: import("react").ForwardRefExoticComponent<ListSubheaderProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/navigation/NavSubheader.js

@@ -6,6 +6,7 @@ import { navItem } from "./navItemStyles.js";
  * A simple wrapper around the {@link ListSubheader} that updates the padding
  * based on the current navigation item depth to match the other items.
  *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export const NavSubheader = /*#__PURE__*/ forwardRef(function NavSubheader(props, ref) {
     const { textProps, ...remaining } = props;

package/dist/navigation/NavSubheader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavSubheader.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type NavSubheaderProps = ListSubheaderProps;\n\n/**\n * A simple wrapper around the {@link ListSubheader} that updates the padding\n * based on the current navigation item depth to match the other items.\n *\n * @since 6.0.0\n */\nexport const NavSubheader = forwardRef<HTMLLIElement, NavSubheaderProps>(\n  function NavSubheader(props, ref) {\n    const { textProps, ...remaining } = props;\n\n    return (\n      <ListSubheader\n        {...remaining}\n        ref={ref}\n        textProps={{\n          ...textProps,\n          className: navItem({ className: textProps?.className }),\n        }}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","navItem","NavSubheader","props","ref","textProps","remaining","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,OAAO,QAAQ,qBAAqB;AAO7C;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAEpC,qBACE,KAACH;QACE,GAAGM,SAAS;QACbF,KAAKA;QACLC,WAAW;YACT,GAAGA,SAAS;YACZE,WAAWN,QAAQ;gBAAEM,WAAWF,WAAWE;YAAU;QACvD;;AAGN,GACA"}
+{"version":3,"sources":["../../src/navigation/NavSubheader.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type NavSubheaderProps = ListSubheaderProps;\n\n/**\n * A simple wrapper around the {@link ListSubheader} that updates the padding\n * based on the current navigation item depth to match the other items.\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavSubheader = forwardRef<HTMLLIElement, NavSubheaderProps>(\n  function NavSubheader(props, ref) {\n    const { textProps, ...remaining } = props;\n\n    return (\n      <ListSubheader\n        {...remaining}\n        ref={ref}\n        textProps={{\n          ...textProps,\n          className: navItem({ className: textProps?.className }),\n        }}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","navItem","NavSubheader","props","ref","textProps","remaining","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,OAAO,QAAQ,qBAAqB;AAO7C;;;;;;CAMC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAEpC,qBACE,KAACH;QACE,GAAGM,SAAS;QACbF,KAAKA;QACLC,WAAW;YACT,GAAGA,SAAS;YACZE,WAAWN,QAAQ;gBAAEM,WAAWF,WAAWE;YAAU;QACvD;;AAGN,GACA"}

package/dist/navigation/Navigation.d.ts

@@ -26,6 +26,50 @@ export interface NavigationProps<Item extends NavigationItem = NavigationItem, D
 /**
  * **Client Component**
  *
+ * The `Navigation` component can be used to create a list of links to
+ * different pages within the app and generally used within a `Sheet` or
+ * `LayoutNav`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Navigation } from "@react-md/core/navigation/Navigation";
+ * import { type NavigationItem } from "@react-md/core/navigation/types";
+ * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
+ * import { usePathname } from "next/navigation.js";
+ * import { type ReactElement } from "react";
+ *
+ * import { LinkUnstyled } from "@/components/LinkUnstyled.jsx";
+ *
+ * const items: readonly NavigationItem[] = [
+ *   {
+ *     type: "route",
+ *     href: "/",
+ *     children: "Home",
+ *   },
+ *   {
+ *     type: "route",
+ *     href: "/page-1",
+ *     children: "Page 1",
+ *   },
+ * ];
+ *
+ * export function MainNavigation(): ReactElement {
+ *   const pathname = usePathname();
+ *   const { data } = useNavigationExpansion({
+ *     pathname,
+ *     linkComponent: LinkUnstyled,
+ *   });
+ *   return (
+ *     <nav aria-label="Navigation">
+ *       <Navigation data={data} items={items} />
+ *     </nav>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */
 export declare function Navigation<Item extends NavigationItem, Data extends NavigationRenderData>(props: NavigationProps<Item, Data>): ReactElement;

package/dist/navigation/Navigation.js

@@ -28,6 +28,50 @@ import { NavGroup } from "./NavGroup.js";
 /**
  * **Client Component**
  *
+ * The `Navigation` component can be used to create a list of links to
+ * different pages within the app and generally used within a `Sheet` or
+ * `LayoutNav`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * "use client";
+ *
+ * import { Navigation } from "@react-md/core/navigation/Navigation";
+ * import { type NavigationItem } from "@react-md/core/navigation/types";
+ * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
+ * import { usePathname } from "next/navigation.js";
+ * import { type ReactElement } from "react";
+ *
+ * import { LinkUnstyled } from "@/components/LinkUnstyled.jsx";
+ *
+ * const items: readonly NavigationItem[] = [
+ *   {
+ *     type: "route",
+ *     href: "/",
+ *     children: "Home",
+ *   },
+ *   {
+ *     type: "route",
+ *     href: "/page-1",
+ *     children: "Page 1",
+ *   },
+ * ];
+ *
+ * export function MainNavigation(): ReactElement {
+ *   const pathname = usePathname();
+ *   const { data } = useNavigationExpansion({
+ *     pathname,
+ *     linkComponent: LinkUnstyled,
+ *   });
+ *   return (
+ *     <nav aria-label="Navigation">
+ *       <Navigation data={data} items={items} />
+ *     </nav>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}
  * @since 6.0.0
  */ export function Navigation(props) {
     const { data, items, render = DefaultNavigationRenderer, getItemKey = getRecursiveNavItemKey, ...remaining } = props;

package/dist/navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/Navigation.tsx"],"sourcesContent":["import { type ComponentType, type ReactElement } from \"react\";\n\nimport { type ListProps } from \"../list/List.js\";\nimport {\n  type RecursiveItem,\n  type RecursiveItemKeyOptions,\n  type RenderRecursiveItemsProps,\n  RenderRecursively,\n  getRecursiveItemKey,\n} from \"../utils/RenderRecursively.js\";\nimport { DefaultNavigationRenderer } from \"./DefaultNavigationRenderer.js\";\nimport { NavGroup } from \"./NavGroup.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\n\n/**\n * The default implementation for the nav item keys. It will attempt to set the\n * key in the following order:\n * - `href` if it exists and has length\n * - `children` if it's a string and has length\n * - default {@link getRecursiveItemKey} behavior of `${depth}-${index}`\n *\n * @since 6.0.0\n */\nexport function getRecursiveNavItemKey<\n  Item extends NavigationItem = NavigationItem,\n>(options: RecursiveItemKeyOptions<Item>): string {\n  const { item } = options;\n  // if it's a route, try setting the key to the href since they are generally\n  // unique\n  if (\"href\" in item && item.href) {\n    return item.href;\n  }\n\n  // if children exist in the item (group, route, subheader), try to set that as\n  // the key since they are usually unique\n  if (\n    \"children\" in item &&\n    typeof item.children === \"string\" &&\n    item.children\n  ) {\n    return item.children;\n  }\n\n  // use the default key behavior if all else fails\n  return getRecursiveItemKey(options);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> extends Omit<ListProps, \"children\"> {\n  data: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /** @see {@link DefaultNavigationRenderer} */\n  render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /** @see {@link getRecursiveNavItemKey} */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport function Navigation<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: NavigationProps<Item, Data>): ReactElement {\n  const {\n    data,\n    items,\n    render = DefaultNavigationRenderer,\n    getItemKey = getRecursiveNavItemKey,\n    ...remaining\n  } = props;\n\n  return (\n    <NavGroup depth={0} {...remaining}>\n      <RenderRecursively\n        data={data}\n        items={items}\n        render={render}\n        getItemKey={getItemKey}\n      />\n    </NavGroup>\n  );\n}\n"],"names":["RenderRecursively","getRecursiveItemKey","DefaultNavigationRenderer","NavGroup","getRecursiveNavItemKey","options","item","href","children","Navigation","props","data","items","render","getItemKey","remaining","depth"],"mappings":";AAGA,SAIEA,iBAAiB,EACjBC,mBAAmB,QACd,gCAAgC;AACvC,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;CAQC,GACD,OAAO,SAASC,uBAEdC,OAAsC;IACtC,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,4EAA4E;IAC5E,SAAS;IACT,IAAI,UAAUC,QAAQA,KAAKC,IAAI,EAAE;QAC/B,OAAOD,KAAKC,IAAI;IAClB;IAEA,8EAA8E;IAC9E,wCAAwC;IACxC,IACE,cAAcD,QACd,OAAOA,KAAKE,QAAQ,KAAK,YACzBF,KAAKE,QAAQ,EACb;QACA,OAAOF,KAAKE,QAAQ;IACtB;IAEA,iDAAiD;IACjD,OAAOP,oBAAoBI;AAC7B;AAmBA;;;;CAIC,GACD,OAAO,SAASI,WAGdC,KAAkC;IAClC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,SAASX,yBAAyB,EAClCY,aAAaV,sBAAsB,EACnC,GAAGW,WACJ,GAAGL;IAEJ,qBACE,KAACP;QAASa,OAAO;QAAI,GAAGD,SAAS;kBAC/B,cAAA,KAACf;YACCW,MAAMA;YACNC,OAAOA;YACPC,QAAQA;YACRC,YAAYA;;;AAIpB"}
+{"version":3,"sources":["../../src/navigation/Navigation.tsx"],"sourcesContent":["import { type ComponentType, type ReactElement } from \"react\";\n\nimport { type ListProps } from \"../list/List.js\";\nimport {\n  type RecursiveItem,\n  type RecursiveItemKeyOptions,\n  type RenderRecursiveItemsProps,\n  RenderRecursively,\n  getRecursiveItemKey,\n} from \"../utils/RenderRecursively.js\";\nimport { DefaultNavigationRenderer } from \"./DefaultNavigationRenderer.js\";\nimport { NavGroup } from \"./NavGroup.js\";\nimport { type NavigationItem, type NavigationRenderData } from \"./types.js\";\n\n/**\n * The default implementation for the nav item keys. It will attempt to set the\n * key in the following order:\n * - `href` if it exists and has length\n * - `children` if it's a string and has length\n * - default {@link getRecursiveItemKey} behavior of `${depth}-${index}`\n *\n * @since 6.0.0\n */\nexport function getRecursiveNavItemKey<\n  Item extends NavigationItem = NavigationItem,\n>(options: RecursiveItemKeyOptions<Item>): string {\n  const { item } = options;\n  // if it's a route, try setting the key to the href since they are generally\n  // unique\n  if (\"href\" in item && item.href) {\n    return item.href;\n  }\n\n  // if children exist in the item (group, route, subheader), try to set that as\n  // the key since they are usually unique\n  if (\n    \"children\" in item &&\n    typeof item.children === \"string\" &&\n    item.children\n  ) {\n    return item.children;\n  }\n\n  // use the default key behavior if all else fails\n  return getRecursiveItemKey(options);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationProps<\n  Item extends NavigationItem = NavigationItem,\n  Data extends NavigationRenderData = NavigationRenderData,\n> extends Omit<ListProps, \"children\"> {\n  data: Data;\n  items: readonly RecursiveItem<Item>[];\n\n  /** @see {@link DefaultNavigationRenderer} */\n  render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;\n\n  /** @see {@link getRecursiveNavItemKey} */\n  getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;\n}\n\n/**\n * **Client Component**\n *\n * The `Navigation` component can be used to create a list of links to\n * different pages within the app and generally used within a `Sheet` or\n * `LayoutNav`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Navigation } from \"@react-md/core/navigation/Navigation\";\n * import { type NavigationItem } from \"@react-md/core/navigation/types\";\n * import { useNavigationExpansion } from \"@react-md/core/navigation/useNavigationExpansion\";\n * import { usePathname } from \"next/navigation.js\";\n * import { type ReactElement } from \"react\";\n *\n * import { LinkUnstyled } from \"@/components/LinkUnstyled.jsx\";\n *\n * const items: readonly NavigationItem[] = [\n *   {\n *     type: \"route\",\n *     href: \"/\",\n *     children: \"Home\",\n *   },\n *   {\n *     type: \"route\",\n *     href: \"/page-1\",\n *     children: \"Page 1\",\n *   },\n * ];\n *\n * export function MainNavigation(): ReactElement {\n *   const pathname = usePathname();\n *   const { data } = useNavigationExpansion({\n *     pathname,\n *     linkComponent: LinkUnstyled,\n *   });\n *   return (\n *     <nav aria-label=\"Navigation\">\n *       <Navigation data={data} items={items} />\n *     </nav>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport function Navigation<\n  Item extends NavigationItem,\n  Data extends NavigationRenderData,\n>(props: NavigationProps<Item, Data>): ReactElement {\n  const {\n    data,\n    items,\n    render = DefaultNavigationRenderer,\n    getItemKey = getRecursiveNavItemKey,\n    ...remaining\n  } = props;\n\n  return (\n    <NavGroup depth={0} {...remaining}>\n      <RenderRecursively\n        data={data}\n        items={items}\n        render={render}\n        getItemKey={getItemKey}\n      />\n    </NavGroup>\n  );\n}\n"],"names":["RenderRecursively","getRecursiveItemKey","DefaultNavigationRenderer","NavGroup","getRecursiveNavItemKey","options","item","href","children","Navigation","props","data","items","render","getItemKey","remaining","depth"],"mappings":";AAGA,SAIEA,iBAAiB,EACjBC,mBAAmB,QACd,gCAAgC;AACvC,SAASC,yBAAyB,QAAQ,iCAAiC;AAC3E,SAASC,QAAQ,QAAQ,gBAAgB;AAGzC;;;;;;;;CAQC,GACD,OAAO,SAASC,uBAEdC,OAAsC;IACtC,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,4EAA4E;IAC5E,SAAS;IACT,IAAI,UAAUC,QAAQA,KAAKC,IAAI,EAAE;QAC/B,OAAOD,KAAKC,IAAI;IAClB;IAEA,8EAA8E;IAC9E,wCAAwC;IACxC,IACE,cAAcD,QACd,OAAOA,KAAKE,QAAQ,KAAK,YACzBF,KAAKE,QAAQ,EACb;QACA,OAAOF,KAAKE,QAAQ;IACtB;IAEA,iDAAiD;IACjD,OAAOP,oBAAoBI;AAC7B;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,SAASI,WAGdC,KAAkC;IAClC,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,SAASX,yBAAyB,EAClCY,aAAaV,sBAAsB,EACnC,GAAGW,WACJ,GAAGL;IAEJ,qBACE,KAACP;QAASa,OAAO;QAAI,GAAGD,SAAS;kBAC/B,cAAA,KAACf;YACCW,MAAMA;YACNC,OAAOA;YACPC,QAAQA;YACRC,YAAYA;;;AAIpB"}

package/dist/navigation/_navigation.scss

@@ -1,16 +1,40 @@
+////
+/// @group navigation
+////
+
 @use "sass:list";
 @use "sass:map";
 @use "../utils";
 @use "../tree/tree";
 @use "../interaction/interaction";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
+
+/// The default border-radius.
+/// @type Number
 $border-radius: 3rem !default;
+
+/// The default horizontal padding.
+/// @type Number
 $horizontal-padding: 0.25rem !default;
+
+/// This is used to continually add more padding to the start of the
+/// `NavigationItem` the deeper within the nested lists it appears.
+///
+/// @see $increasing-padding
+/// @type Number
 $padding-incrementor: 0.75rem !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (border-radius, horizontal-padding, padding-incrementor);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "navigation");
   @if $fallback {
@@ -20,16 +44,24 @@ $variables: (border-radius, horizontal-padding, padding-incrementor);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "navigation")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(border-radius, $border-radius);
@@ -38,12 +70,22 @@ $variables: (border-radius, horizontal-padding, padding-incrementor);
   }
 }
 
+/// This is the `calc` string for adding more padding the deeper within the
+/// `Navigation` tree a link appears.
+///
+/// @ignore NOTE: This has to be defined here since it relies on the `get-var` function.
+///
+/// @type String
+$increasing-padding: calc(
+  tree.get-var(depth) * get-var(padding-incrementor) +
+    get-var(horizontal-padding)
+);
+
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
-  $increasing-padding: calc(
-    tree.get-var(depth) * get-var(padding-incrementor) +
-      get-var(horizontal-padding)
-  );
-
   @if not $disable-everything {
     @include utils.optional-layer(navigation, $disable-layer) {
       .rmd-nav-group {

package/dist/navigation/getTableOfContentsHeadings.d.ts

@@ -0,0 +1,20 @@
+import { type TableOfContentsHeadings, type TableOfContentsHeadingsOptions } from "./types.js";
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export interface GetTableOfContentsHeadingsOptions extends Required<TableOfContentsHeadingsOptions> {
+    ssr: boolean;
+}
+/**
+ * This is used by the `useTableOfContentsHeadings` hook to find
+ * the active heading element which is why it is marked as
+ * internal.
+ *
+ * This will always return an empty list if `ssr` is `true` or
+ * `typeof window === "undefined"`.
+ *
+ * @internal
+ * @since 6.0.0
+ */
+export declare function getTableOfContentsHeadings(options: GetTableOfContentsHeadingsOptions): TableOfContentsHeadings;

package/dist/navigation/getTableOfContentsHeadings.js

@@ -0,0 +1,53 @@
+/**
+ * This is used by the `useTableOfContentsHeadings` hook to find
+ * the active heading element which is why it is marked as
+ * internal.
+ *
+ * This will always return an empty list if `ssr` is `true` or
+ * `typeof window === "undefined"`.
+ *
+ * @internal
+ * @since 6.0.0
+ */ export function getTableOfContentsHeadings(options) {
+    const { ssr, selector, getDepth, getHeadingText } = options;
+    if (ssr || typeof window === "undefined") {
+        return [];
+    }
+    const root = {
+        id: "",
+        depth: 0,
+        items: [],
+        children: ""
+    };
+    let previous = root;
+    const parents = [];
+    const headings = document.querySelectorAll(selector);
+    headings.forEach((heading)=>{
+        const depth = getDepth(heading);
+        const item = {
+            id: heading.id,
+            depth,
+            items: [],
+            children: getHeadingText(heading)
+        };
+        if (depth > previous.depth) {
+            if (!previous.items) {
+                previous.items = [];
+            }
+            parents.push(previous);
+        } else if (depth < previous.depth) {
+            while(parents[parents.length - 1].depth >= depth){
+                parents.pop();
+            }
+        }
+        const i = parents.length - 1;
+        parents[i].items = [
+            ...parents[i].items ?? [],
+            item
+        ];
+        previous = item;
+    });
+    return root.items;
+}
+
+//# sourceMappingURL=getTableOfContentsHeadings.js.map

package/dist/navigation/getTableOfContentsHeadings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/getTableOfContentsHeadings.ts"],"sourcesContent":["import {\n  type TableOfContentsHeadingItem,\n  type TableOfContentsHeadings,\n  type TableOfContentsHeadingsOptions,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface GetTableOfContentsHeadingsOptions\n  extends Required<TableOfContentsHeadingsOptions> {\n  ssr: boolean;\n}\n\n/**\n * This is used by the `useTableOfContentsHeadings` hook to find\n * the active heading element which is why it is marked as\n * internal.\n *\n * This will always return an empty list if `ssr` is `true` or\n * `typeof window === \"undefined\"`.\n *\n * @internal\n * @since 6.0.0\n */\nexport function getTableOfContentsHeadings(\n  options: GetTableOfContentsHeadingsOptions\n): TableOfContentsHeadings {\n  const { ssr, selector, getDepth, getHeadingText } = options;\n\n  if (ssr || typeof window === \"undefined\") {\n    return [];\n  }\n\n  const root = {\n    id: \"\",\n    depth: 0,\n    items: [],\n    children: \"\",\n  } satisfies TableOfContentsHeadingItem;\n  let previous: TableOfContentsHeadingItem = root;\n  const parents: TableOfContentsHeadingItem[] = [];\n  const headings = document.querySelectorAll(selector);\n  headings.forEach((heading) => {\n    const depth = getDepth(heading);\n    const item: TableOfContentsHeadingItem = {\n      id: heading.id,\n      depth,\n      items: [],\n      children: getHeadingText(heading),\n    };\n    if (depth > previous.depth) {\n      if (!previous.items) {\n        previous.items = [];\n      }\n\n      parents.push(previous);\n    } else if (depth < previous.depth) {\n      while (parents[parents.length - 1].depth >= depth) {\n        parents.pop();\n      }\n    }\n    const i = parents.length - 1;\n    parents[i].items = [...(parents[i].items ?? []), item];\n    previous = item;\n  });\n\n  return root.items;\n}\n"],"names":["getTableOfContentsHeadings","options","ssr","selector","getDepth","getHeadingText","window","root","id","depth","items","children","previous","parents","headings","document","querySelectorAll","forEach","heading","item","push","length","pop","i"],"mappings":"AAeA;;;;;;;;;;CAUC,GACD,OAAO,SAASA,2BACdC,OAA0C;IAE1C,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGJ;IAEpD,IAAIC,OAAO,OAAOI,WAAW,aAAa;QACxC,OAAO,EAAE;IACX;IAEA,MAAMC,OAAO;QACXC,IAAI;QACJC,OAAO;QACPC,OAAO,EAAE;QACTC,UAAU;IACZ;IACA,IAAIC,WAAuCL;IAC3C,MAAMM,UAAwC,EAAE;IAChD,MAAMC,WAAWC,SAASC,gBAAgB,CAACb;IAC3CW,SAASG,OAAO,CAAC,CAACC;QAChB,MAAMT,QAAQL,SAASc;QACvB,MAAMC,OAAmC;YACvCX,IAAIU,QAAQV,EAAE;YACdC;YACAC,OAAO,EAAE;YACTC,UAAUN,eAAea;QAC3B;QACA,IAAIT,QAAQG,SAASH,KAAK,EAAE;YAC1B,IAAI,CAACG,SAASF,KAAK,EAAE;gBACnBE,SAASF,KAAK,GAAG,EAAE;YACrB;YAEAG,QAAQO,IAAI,CAACR;QACf,OAAO,IAAIH,QAAQG,SAASH,KAAK,EAAE;YACjC,MAAOI,OAAO,CAACA,QAAQQ,MAAM,GAAG,EAAE,CAACZ,KAAK,IAAIA,MAAO;gBACjDI,QAAQS,GAAG;YACb;QACF;QACA,MAAMC,IAAIV,QAAQQ,MAAM,GAAG;QAC3BR,OAAO,CAACU,EAAE,CAACb,KAAK,GAAG;eAAKG,OAAO,CAACU,EAAE,CAACb,KAAK,IAAI,EAAE;YAAGS;SAAK;QACtDP,WAAWO;IACb;IAEA,OAAOZ,KAAKG,KAAK;AACnB"}

package/dist/navigation/navItemStyles.js

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { button } from "../button/buttonStyles.js";
+import { button } from "../button/styles.js";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-nav-item");

package/dist/navigation/navItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/buttonStyles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n  options: NavItemContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n  className?: string;\n  active?: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n  const {\n    active,\n    activeClassName = cssUtils({ fontWeight: \"bold\" }),\n    className,\n  } = options;\n\n  return cnb(\n    navItemContent(),\n    styles(\"link\", { active }),\n    button(),\n    cssUtils({ textDecoration: \"none\" }),\n    active && activeClassName,\n    className\n  );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}
+{"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/styles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n  options: NavItemContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n  className?: string;\n  active?: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n  const {\n    active,\n    activeClassName = cssUtils({ fontWeight: \"bold\" }),\n    className,\n  } = options;\n\n  return cnb(\n    navItemContent(),\n    styles(\"link\", { active }),\n    button(),\n    cssUtils({ textDecoration: \"none\" }),\n    active && activeClassName,\n    className\n  );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}

package/dist/navigation/types.d.ts

@@ -183,3 +183,50 @@ export interface NavItemContentProps {
      */
     tooltipOptions?: Omit<TooltipOptions<HTMLAnchorElement>, keyof TooltippedElementEventHandlers<HTMLAnchorElement>>;
 }
+/**
+ * @since 6.0.0
+ */
+export interface HeadingReference {
+    id: string;
+}
+/**
+ * @since 6.0.0
+ */
+export interface HeadingReferenceWithChildren extends HeadingReference {
+    items?: readonly HeadingReferenceWithChildren[];
+}
+/** @since 6.0.0 */
+export interface TableOfContentsHeadingsOptions {
+    /**
+     * This should be a `document.querySelectorAll` query that returns elements
+     * to display in a table of contents component that have a valid id.
+     *
+     * @see {@link DEFAULT_HEADING_SELECTOR}
+     * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`
+     */
+    selector?: string;
+    /**
+     * @see {@link DEFAULT_GET_HEADING_DEPTH}
+     * @defaultValue `(element) => parseInt(element.tagName.substring(1))`
+     */
+    getDepth?: (element: Element) => number;
+    /**
+     * This is used to get the text to display in a table of contents from each
+     * heading element.
+     *
+     * @see {@link DEFAULT_GET_HEADING_TEXT}
+     * @defaultValue `(element) => element.textContent || ""`
+     */
+    getHeadingText?: (element: Element) => string;
+}
+/** @since 6.0.0 */
+export interface TableOfContentsHeading extends HeadingReference {
+    depth: number;
+    children: string;
+}
+/** @since 6.0.0 */
+export interface TableOfContentsHeadingItem extends TableOfContentsHeading, HeadingReferenceWithChildren {
+    items?: TableOfContentsHeadingItem[];
+}
+/** @since 6.0.0 */
+export type TableOfContentsHeadings = readonly TableOfContentsHeadingItem[];

package/dist/navigation/types.js

@@ -1,5 +1,3 @@
-/**
- * @since 6.0.0
- */ export { };
+/** @since 6.0.0 */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/navigation/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n  type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n  type: \"subheader\";\n  children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * const id = getNavigationGroupId(item, nextParents);\n * return (\n *   <CollapsibleNavGroup\n *     depth={nextParents.length}\n *     collapsed={!data?.expandedItems.has(id)}\n *     buttonChildren={item.children}\n *     toggleCollapsed={() => {\n *       data?.toggleExpandedItem(id);\n *     }}\n *   >\n *     {children}\n *   </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n  type: \"group\";\n\n  /**\n   * An optional unique id to identify the group used for handling the expanded\n   * state when the `href` can't be used.\n   */\n  id?: string;\n\n  /**\n   * An optional href to prefix all child routes with and can be used instead of\n   * the {@link id} for handling the expanded state.\n   *\n   * @example\n   * ```ts\n   * {\n   *   type: \"group\",\n   *   href: \"/some-path\",\n   *   children: \"Some Name\",\n   *   items: [\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-1\",\n   *       children: \"Page 1\",\n   *     },\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-2\",\n   *       children: \"Page 2\",\n   *     },\n   *   ],\n   * }\n   * ```\n   *\n   * Would result in:\n   *\n   * - Page 1 - `/some-path/page-1`\n   * - Page 2 - `/some-path/page-2`\n   */\n  href?: string;\n  children: ReactNode;\n  items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n  type: \"route\";\n  href: string;\n  children: ReactNode;\n  active?: boolean;\n  beforeAddon?: ReactNode;\n  afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n  | NavigationItemDivider\n  | NavigationItemSubheader\n  | NavigationItemGroup\n  | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type CustomNavigationLinkComponent = ForwardRefExoticComponent<\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent = \"a\" | CustomNavigationLinkComponent;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansion {\n  expandedItems: ReadonlySet<string>;\n  toggleExpandedItem: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData extends NavigationExpansion {\n  /**\n   * This is used to set the `active` state on a `NavItemLink`\n   */\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n  /**\n   * Any additional props to provide the `<span>` element that wraps the\n   * children such as `style`, `className`, and `ref`.\n   */\n  spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * An optional addon to render before the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * This should contain accessible text for the page that this will link to and\n   * will automatically be truncated with ellipsis if it is too large. A tooltip\n   * will also appear only when it has been truncated.\n   */\n  children: ReactNode;\n\n  /**\n   * This most likely will never need to be used, but it's a way to override any\n   * tooltip options. The default behavior will position the tooltip to the\n   * right and only appear if the `children` are overflown.\n   *\n   * @example Customize\n   * ```tsx\n   * <NavItemLink\n   *   {...props}\n   *   tooltipOptions={{\n   *     overflowOnly: false,\n   *     defaultPosition: \"above\",\n   *     vhMargin: \"1rem\",\n   *     vwMargin: \"1rem\",\n   *   }}\n   * >\n   * ```\n   */\n  tooltipOptions?: Omit<\n    TooltipOptions<HTMLAnchorElement>,\n    keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n  >;\n}\n"],"names":[],"mappings":"AAqKA;;CAEC,GACD,WAgDC"}
+{"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n  type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n  type: \"subheader\";\n  children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * const id = getNavigationGroupId(item, nextParents);\n * return (\n *   <CollapsibleNavGroup\n *     depth={nextParents.length}\n *     collapsed={!data?.expandedItems.has(id)}\n *     buttonChildren={item.children}\n *     toggleCollapsed={() => {\n *       data?.toggleExpandedItem(id);\n *     }}\n *   >\n *     {children}\n *   </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n  type: \"group\";\n\n  /**\n   * An optional unique id to identify the group used for handling the expanded\n   * state when the `href` can't be used.\n   */\n  id?: string;\n\n  /**\n   * An optional href to prefix all child routes with and can be used instead of\n   * the {@link id} for handling the expanded state.\n   *\n   * @example\n   * ```ts\n   * {\n   *   type: \"group\",\n   *   href: \"/some-path\",\n   *   children: \"Some Name\",\n   *   items: [\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-1\",\n   *       children: \"Page 1\",\n   *     },\n   *     {\n   *       type: \"route\",\n   *       href: \"/page-2\",\n   *       children: \"Page 2\",\n   *     },\n   *   ],\n   * }\n   * ```\n   *\n   * Would result in:\n   *\n   * - Page 1 - `/some-path/page-1`\n   * - Page 2 - `/some-path/page-2`\n   */\n  href?: string;\n  children: ReactNode;\n  items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n  type: \"route\";\n  href: string;\n  children: ReactNode;\n  active?: boolean;\n  beforeAddon?: ReactNode;\n  afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n  | NavigationItemDivider\n  | NavigationItemSubheader\n  | NavigationItemGroup\n  | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type CustomNavigationLinkComponent = ForwardRefExoticComponent<\n  AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent = \"a\" | CustomNavigationLinkComponent;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansion {\n  expandedItems: ReadonlySet<string>;\n  toggleExpandedItem: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData extends NavigationExpansion {\n  /**\n   * This is used to set the `active` state on a `NavItemLink`\n   */\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n  /**\n   * Any additional props to provide the `<span>` element that wraps the\n   * children such as `style`, `className`, and `ref`.\n   */\n  spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * An optional addon to render before the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * This should contain accessible text for the page that this will link to and\n   * will automatically be truncated with ellipsis if it is too large. A tooltip\n   * will also appear only when it has been truncated.\n   */\n  children: ReactNode;\n\n  /**\n   * This most likely will never need to be used, but it's a way to override any\n   * tooltip options. The default behavior will position the tooltip to the\n   * right and only appear if the `children` are overflown.\n   *\n   * @example Customize\n   * ```tsx\n   * <NavItemLink\n   *   {...props}\n   *   tooltipOptions={{\n   *     overflowOnly: false,\n   *     defaultPosition: \"above\",\n   *     vhMargin: \"1rem\",\n   *     vwMargin: \"1rem\",\n   *   }}\n   * >\n   * ```\n   */\n  tooltipOptions?: Omit<\n    TooltipOptions<HTMLAnchorElement>,\n    keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n  >;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReference {\n  id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReferenceWithChildren extends HeadingReference {\n  items?: readonly HeadingReferenceWithChildren[];\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingsOptions {\n  /**\n   * This should be a `document.querySelectorAll` query that returns elements\n   * to display in a table of contents component that have a valid id.\n   *\n   * @see {@link DEFAULT_HEADING_SELECTOR}\n   * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`\n   */\n  selector?: string;\n\n  /**\n   * @see {@link DEFAULT_GET_HEADING_DEPTH}\n   * @defaultValue `(element) => parseInt(element.tagName.substring(1))`\n   */\n  getDepth?: (element: Element) => number;\n\n  /**\n   * This is used to get the text to display in a table of contents from each\n   * heading element.\n   *\n   * @see {@link DEFAULT_GET_HEADING_TEXT}\n   * @defaultValue `(element) => element.textContent || \"\"`\n   */\n  getHeadingText?: (element: Element) => string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeading extends HeadingReference {\n  depth: number;\n  children: string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingItem\n  extends TableOfContentsHeading,\n    HeadingReferenceWithChildren {\n  items?: TableOfContentsHeadingItem[];\n}\n\n/** @since 6.0.0 */\nexport type TableOfContentsHeadings = readonly TableOfContentsHeadingItem[];\n"],"names":[],"mappings":"AAgRA,iBAAiB,GACjB,WAA4E"}