@react-md/core 6.5.1 → 7.0.0

package/dist/icon/SVGIcon.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  *
  * @see {@link https://react-md.dev/components/icon | Icon Demos}
- */ export const SVGIcon = /*#__PURE__*/ forwardRef(function SVGIcon(props, ref) {
-    const { "aria-hidden": ariaHidden = true, focusable = "false", use, xmlns = use ? "http://www.w3.org/2000/svg" : undefined, viewBox = "0 0 24 24", dense = false, className, theme, inline, children: propChildren, ...remaining } = props;
+ */ export function SVGIcon(props) {
+    const { ref, "aria-hidden": ariaHidden = true, focusable = "false", use, xmlns = use ? "http://www.w3.org/2000/svg" : undefined, viewBox = "0 0 24 24", dense = false, className, theme, inline, children: propChildren, ...remaining } = props;
     let children = propChildren;
     if (!children && use) {
         children = /*#__PURE__*/ _jsx("use", {
@@ -30,6 +29,6 @@ import { icon } from "./styles.js";
         viewBox: viewBox,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=SVGIcon.js.map

package/dist/icon/SVGIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,cAAc;AAwEjE;;;;;CAKC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {\n  ref?: Ref<SVGSVGElement>;\n\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\n */\nexport function SVGIcon(props: SVGIconProps): ReactElement {\n  const {\n    ref,\n    \"aria-hidden\": ariaHidden = true,\n    focusable = \"false\",\n    use,\n    xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n    viewBox = \"0 0 24 24\",\n    dense = false,\n    className,\n    theme,\n    inline,\n    children: propChildren,\n    ...remaining\n  } = props;\n\n  let children = propChildren;\n  if (!children && use) {\n    children = <use xlinkHref={use} />;\n  }\n\n  return (\n    <svg\n      {...remaining}\n      aria-hidden={ariaHidden}\n      ref={ref}\n      className={icon({\n        type: \"svg\",\n        dense,\n        theme,\n        inline,\n        className,\n      })}\n      focusable={focusable}\n      xmlns={xmlns}\n      viewBox={viewBox}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":["icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAOA,SAAuCA,IAAI,QAAQ,cAAc;AA0EjE;;;;;CAKC,GACD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAM,EACJC,GAAG,EACH,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP"}

package/dist/layout/LayoutAppBar.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement, type Ref } from "react";
 import { type AppBarProps, type CustomAppBarComponent } from "../app-bar/AppBar.js";
 import { type SkipToMainContentProps } from "../link/SkipToMainContent.js";
 import { type CssPosition, type PropsWithRef } from "../types.js";
@@ -5,6 +6,7 @@ import { type CssPosition, type PropsWithRef } from "../types.js";
  * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
  */
 export interface LayoutAppBarProps extends AppBarProps {
+    ref?: Ref<HTMLDivElement>;
     /** @defaultValue `"header"` */
     as?: CustomAppBarComponent;
     /** @defaultValue `"fixed"` */
@@ -48,4 +50,4 @@ export interface LayoutAppBarProps extends AppBarProps {
  * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
  * component is to dynamically set the `--rmd-layout-header-height` variable.
  */
-export declare const LayoutAppBar: import("react").ForwardRefExoticComponent<LayoutAppBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function LayoutAppBar(props: LayoutAppBarProps): ReactElement;

package/dist/layout/LayoutAppBar.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { AppBar } from "../app-bar/AppBar.js";
 import { SkipToMainContent } from "../link/SkipToMainContent.js";
 import { useCSSVariables } from "../theme/useCSSVariables.js";
@@ -39,8 +38,8 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  * @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.
- */ export const LayoutAppBar = /*#__PURE__*/ forwardRef(function LayoutAppBar(props, ref) {
-    const { as = "header", id: propId, position = "fixed", skipProps, children, ...remaining } = props;
+ */ export function LayoutAppBar(props) {
+    const { ref, as = "header", id: propId, position = "fixed", skipProps, children, ...remaining } = props;
     const id = useEnsuredId(propId, "layout-header");
     const { appBarRef, variables } = useLayoutAppBarHeight(ref);
     useCSSVariables(variables);
@@ -57,6 +56,6 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
             children
         ]
     });
-});
+}
 
 //# sourceMappingURL=LayoutAppBar.js.map

package/dist/layout/LayoutAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n *   @include tablet-media {\n *     @include layout-set-var(header-height, $app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type Ref } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  ref?: Ref<HTMLDivElement>;\n\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n *   @include tablet-media {\n *     @include layout-set-var(header-height, $app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport function LayoutAppBar(props: LayoutAppBarProps): ReactElement {\n  const {\n    ref,\n    as = \"header\",\n    id: propId,\n    position = \"fixed\",\n    skipProps,\n    children,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"layout-header\");\n  const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n  useCSSVariables(variables);\n\n  return (\n    <AppBar {...remaining} id={id} as={as} ref={appBarRef} position={position}>\n      <SkipToMainContent {...skipProps} />\n      {children}\n    </AppBar>\n  );\n}\n"],"names":["AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAIA,SACEA,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAoBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,GAAG,EACHC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QAAQ,GAAGc,SAAS;QAAEL,IAAIA;QAAID,IAAIA;QAAID,KAAKQ;QAAWJ,UAAUA;;0BAC/D,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP"}

package/dist/layout/LayoutNav.d.ts

@@ -1,10 +1,11 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type BaseSheetClassNameOptions } from "../sheet/styles.js";
 import { type CSSTransitionClassNames, type TransitionActions, type TransitionCallbacks, type TransitionTimeout } from "../transition/types.js";
 /**
  * @since 6.0.0
  */
 export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseSheetClassNameOptions, TransitionCallbacks, TransitionActions {
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
     /**
      * The component to render as.
@@ -109,4 +110,4 @@ export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseShee
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
-export declare const LayoutNav: import("react").ForwardRefExoticComponent<LayoutNavProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function LayoutNav(props: LayoutNavProps): ReactElement;

package/dist/layout/LayoutNav.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { DEFAULT_SHEET_CLASSNAMES, DEFAULT_SHEET_TIMEOUT, sheet } from "../sheet/styles.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { layoutNav } from "./layoutNavStyles.js";
@@ -85,8 +84,8 @@ import { layoutNav } from "./layoutNavStyles.js";
  *
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
- */ export const LayoutNav = /*#__PURE__*/ forwardRef(function LayoutNav(props, ref) {
-    const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
+ */ export function LayoutNav(props) {
+    const { ref, as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
     const { elementProps } = useCSSTransition({
         nodeRef: ref,
         timeout,
@@ -117,6 +116,6 @@ import { layoutNav } from "./layoutNavStyles.js";
         ...elementProps,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=LayoutNav.js.map

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component === \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAuCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,cAAc,SAAS,CAACC,iBAC9C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  ref?: Ref<HTMLDivElement>;\n\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function LayoutNav(props: LayoutNavProps): ReactElement {\n  const {\n    ref,\n    as: Component = \"nav\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = Component === \"nav\" && !ariaLabelledBy\n      ? \"Navigation\"\n      : undefined,\n    expanded,\n    children,\n    className,\n    timeout = DEFAULT_SHEET_TIMEOUT,\n    classNames = DEFAULT_SHEET_CLASSNAMES,\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExited,\n    onExiting,\n    appBarOffset,\n    ...remaining\n  } = props;\n  const { elementProps } = useCSSTransition({\n    nodeRef: ref,\n    timeout,\n    className: cnb(\n      layoutNav({ appBarOffset }),\n      sheet({\n        className,\n        raised: false,\n        horizontalSize: \"none\",\n      })\n    ),\n    classNames,\n    enter,\n    exit,\n    appear,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExited,\n    onExiting,\n    exitedHidden: true,\n    transitionIn: expanded,\n  });\n\n  return (\n    <Component\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...remaining}\n      {...elementProps}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["cnb","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAyCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EACJC,GAAG,EACHC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,cAAc,SAAS,CAACC,iBAC9C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWhB,IACTK,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP"}

package/dist/layout/LayoutWindowSplitter.d.ts

@@ -1,10 +1,12 @@
+import { type ReactElement, type Ref } from "react";
 import { type BaseWindowSplitterProps } from "../window-splitter/WindowSplitter.js";
 import { type WindowSplitterWidgetProps } from "../window-splitter/useWindowSplitter.js";
 import { type LayoutWindowSplitterClassNameOptions } from "./layoutWindowSplitterStyles.js";
 /**
  * @since 6.0.0
  */
-export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement>, Omit<BaseWindowSplitterProps, keyof WindowSplitterWidgetProps<HTMLButtonElement>>, LayoutWindowSplitterClassNameOptions {
+export interface LayoutWindowSplitterProps extends Omit<WindowSplitterWidgetProps<HTMLButtonElement>, "ref">, Omit<BaseWindowSplitterProps, keyof WindowSplitterWidgetProps<HTMLButtonElement>>, LayoutWindowSplitterClassNameOptions {
+    ref?: Ref<HTMLButtonElement>;
     /** @defaultValue `"Resize Navigation"` */
     "aria-label"?: string;
     /**
@@ -71,4 +73,4 @@ export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTM
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */
-export declare const LayoutWindowSplitter: import("react").ForwardRefExoticComponent<Omit<LayoutWindowSplitterProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function LayoutWindowSplitter(props: LayoutWindowSplitterProps): ReactElement;

package/dist/layout/LayoutWindowSplitter.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { useCSSVariables } from "../theme/useCSSVariables.js";
 import { WindowSplitter } from "../window-splitter/WindowSplitter.js";
 import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
@@ -62,8 +62,8 @@ import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
  *
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
- */ export const LayoutWindowSplitter = /*#__PURE__*/ forwardRef(function LayoutWindowSplitter(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation", appBarOffset, disableResponsive, className, navWidth, ...remaining } = props;
+ */ export function LayoutWindowSplitter(props) {
+    const { ref, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Resize Navigation", appBarOffset, disableResponsive, className, navWidth, ...remaining } = props;
     useCSSVariables(useMemo(()=>[
             {
                 name: "--rmd-layout-size",
@@ -83,6 +83,6 @@ import { layoutWindowSplitter } from "./layoutWindowSplitterStyles.js";
             className
         })
     });
-});
+}
 
 //# sourceMappingURL=LayoutWindowSplitter.js.map

package/dist/layout/LayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends\n    WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAsBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type Ref, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends\n    Omit<WindowSplitterWidgetProps<HTMLButtonElement>, \"ref\">,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  ref?: Ref<HTMLButtonElement>;\n\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function LayoutWindowSplitter(\n  props: LayoutWindowSplitterProps\n): ReactElement {\n  const {\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n}\n"],"names":["useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAAsCA,OAAO,QAAQ,QAAQ;AAG7D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAwBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,SAASC,qBACdC,KAAgC;IAEhC,MAAM,EACJC,GAAG,EACH,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN"}

package/dist/layout/Main.d.ts

@@ -1,10 +1,10 @@
-import { type ElementType, type HTMLAttributes, type ReactNode, type Ref } from "react";
+import { type ElementType, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type MainClassNameOptions } from "./mainStyles.js";
 /**
  * @since 6.0.0
  */
 export type CustomMainElement = ElementType<HTMLAttributes<HTMLElement> & {
-    ref: Ref<HTMLElement>;
+    ref?: Ref<HTMLElement>;
     className?: string;
     tabIndex?: number;
 }>;
@@ -12,6 +12,7 @@ export type CustomMainElement = ElementType<HTMLAttributes<HTMLElement> & {
  * @since 6.0.0
  */
 export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOptions {
+    ref?: Ref<HTMLElement>;
     /**
      * @defaultValue `"main"`
      */
@@ -48,4 +49,4 @@ export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOpt
  * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
  * functionality to keep this component simple.
  */
-export declare const Main: import("react").ForwardRefExoticComponent<MainProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Main(props: MainProps): ReactElement;

package/dist/layout/Main.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { main } from "./mainStyles.js";
 import { useMainTabIndex } from "./useMainTabIndex.js";
@@ -33,8 +32,8 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
  * @see {@link https://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.
- */ export const Main = /*#__PURE__*/ forwardRef(function Main(props, ref) {
-    const { as: Component = "main", id: propId, className, children, tabIndex: propTabIndex, navOffset, appBarOffset, ...remaining } = props;
+ */ export function Main(props) {
+    const { as: Component = "main", id: propId, ref, className, children, tabIndex: propTabIndex, navOffset, appBarOffset, ...remaining } = props;
     const id = useEnsuredId(propId, "main");
     const tabIndex = useMainTabIndex(propTabIndex);
     return /*#__PURE__*/ _jsx(Component, {
@@ -49,6 +48,6 @@ import { useMainTabIndex } from "./useMainTabIndex.js";
         tabIndex: tabIndex,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Main.js.map

package/dist/layout/Main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>, MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AAyBvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref?: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>, MainClassNameOptions {\n  ref?: Ref<HTMLElement>;\n\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport function Main(props: MainProps): ReactElement {\n  const {\n    as: Component = \"main\",\n    id: propId,\n    ref,\n    className,\n    children,\n    tabIndex: propTabIndex,\n    navOffset,\n    appBarOffset,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"main\");\n  const tabIndex = useMainTabIndex(propTabIndex);\n\n  return (\n    <Component\n      {...remaining}\n      id={id}\n      ref={ref}\n      className={main({ navOffset, appBarOffset, className })}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["useEnsuredId","main","useMainTabIndex","Main","props","as","Component","id","propId","ref","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAUA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA2BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMG,KAAKP,aAAaQ,QAAQ;IAChC,MAAMI,WAAWV,gBAAgBW;IAEjC,qBACE,KAACP;QACE,GAAGU,SAAS;QACbT,IAAIA;QACJE,KAAKA;QACLC,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP"}

package/dist/link/Link.d.ts

@@ -1,4 +1,4 @@
-import { type AnchorHTMLAttributes, type ForwardRefExoticComponent } from "react";
+import { type AnchorHTMLAttributes, type ComponentType, type ForwardRefExoticComponent, type ReactElement, type Ref } from "react";
 import { type LinkClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0
@@ -7,6 +7,12 @@ export type CustomLinkComponent = ForwardRefExoticComponent<{
     href: string;
 }> | ForwardRefExoticComponent<{
     to: string;
+}> | ComponentType<{
+    ref?: Ref<HTMLAnchorElement>;
+    href: string;
+}> | ComponentType<{
+    ref?: Ref<HTMLAnchorElement>;
+    to: string;
 }> | "a";
 /**
  * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers
@@ -17,6 +23,7 @@ export type CustomLinkComponent = ForwardRefExoticComponent<{
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {
+    ref?: Ref<HTMLAnchorElement>;
     /**
      * All links **must** have a valid href.
      */
@@ -55,5 +62,6 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, Link
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
+ * @since 7.0.0 No longer uses `forwardRef`
  */
-export declare const Link: ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function Link(props: LinkProps): ReactElement;

package/dist/link/Link.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { link } from "./styles.js";
 /**
  * @example Simple Example
@@ -26,8 +25,9 @@ import { link } from "./styles.js";
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
  * @since 6.0.0 Renamed `flexCentered` to `flex`.
- */ export const Link = /*#__PURE__*/ forwardRef(function Link(props, ref) {
-    const { className, flex, children, ...remaining } = props;
+ * @since 7.0.0 No longer uses `forwardRef`
+ */ export function Link(props) {
+    const { ref, className, flex, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("a", {
         ...remaining,
         ref: ref,
@@ -37,6 +37,6 @@ import { link } from "./styles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Link.js.map

package/dist/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AAmC9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentType,\n  type ForwardRefExoticComponent,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | ComponentType<{ ref?: Ref<HTMLAnchorElement>; href: string }>\n  | ComponentType<{ ref?: Ref<HTMLAnchorElement>; to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {\n  ref?: Ref<HTMLAnchorElement>;\n\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n * @since 7.0.0 No longer uses `forwardRef`\n */\nexport function Link(props: LinkProps): ReactElement {\n  const { ref, className, flex, children, ...remaining } = props;\n\n  return (\n    <a {...remaining} ref={ref} className={link({ flex, className })}>\n      {children}\n    </a>\n  );\n}\n"],"names":["link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAQA,SAAoCA,IAAI,QAAQ,cAAc;AAuC9D;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEzD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP"}

package/dist/link/SkipToMainContent.d.ts

@@ -1,10 +1,11 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 import { type LinkProps } from "./Link.js";
 import { type SkipToMainContentClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 The `mainId` is optional
  */
 export interface SkipToMainContentProps extends Omit<LinkProps, "href">, SkipToMainContentClassNameOptions {
+    ref?: Ref<HTMLAnchorElement>;
     /**
      * @since 6.0.0 Changed default value from `"skip-to-main-content"`
      * @defaultValue `"skip-to-main"`
@@ -56,4 +57,4 @@ export interface SkipToMainContentProps extends Omit<LinkProps, "href">, SkipToM
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
  */
-export declare const SkipToMainContent: import("react").ForwardRefExoticComponent<SkipToMainContentProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function SkipToMainContent(props: SkipToMainContentProps): ReactElement;

package/dist/link/SkipToMainContent.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
+import { useRef } from "react";
 import { useDevEffect } from "../utils/useDevEffect.js";
 import { Link } from "./Link.js";
 import { skipToMainContent } from "./styles.js";
@@ -39,8 +39,8 @@ const getMainElement = (mainId)=>mainId ? document.getElementById(mainId) : docu
  * @since 6.0.0 Throws an error after rendering if no main element can be found
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
- */ export const SkipToMainContent = /*#__PURE__*/ forwardRef(function SkipToMainContent(props, ref) {
-    const { id = "skip-to-main", className, children = "Skip to main content", mainId = "", onClick = noop, unstyled, ...remaining } = props;
+ */ export function SkipToMainContent(props) {
+    const { ref, id = "skip-to-main", className, children = "Skip to main content", mainId = "", onClick = noop, unstyled, ...remaining } = props;
     const mainNodeRef = useRef(null);
     // want to warn the developer about missing main element in development
     // immediately to help prevent errors, but in production this can be lazy
@@ -86,6 +86,6 @@ const getMainElement = (mainId)=>mainId ? document.getElementById(mainId) : docu
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=SkipToMainContent.js.map

package/dist/link/SkipToMainContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/SkipToMainContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef, useRef } from \"react\";\n\nimport { useDevEffect } from \"../utils/useDevEffect.js\";\nimport { Link, type LinkProps } from \"./Link.js\";\nimport {\n  type SkipToMainContentClassNameOptions,\n  skipToMainContent,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getMainElement = (mainId: string): HTMLElement | null =>\n  mainId\n    ? document.getElementById(mainId)\n    : document.querySelector<HTMLElement>('main,[role=\"main\"]');\n\n/**\n * @since 6.0.0 The `mainId` is optional\n */\nexport interface SkipToMainContentProps\n  extends Omit<LinkProps, \"href\">, SkipToMainContentClassNameOptions {\n  /**\n   * @since 6.0.0 Changed default value from `\"skip-to-main-content\"`\n   * @defaultValue `\"skip-to-main\"`\n   */\n  id?: string;\n\n  /**\n   * An optional id for the main element. When this is not provided, the main\n   * element will be found by:\n   *\n   * ```ts\n   * document.querySelector('main,[role=\"main\"]');\n   * ```\n   */\n  mainId?: string;\n\n  /**\n   * @defaultValue `\"Skip to main content\"`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to allow keyboard users a quick way to skip directly\n * to the main content instead of needing to tab through all navigation items.\n *\n * This component should not be used if using the LayoutAppBar component since\n * it is already built-in.\n *\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { SkipToMainContent } from \"@react-md/core/link/SkipToMainContent\";\n * import { type ReactElement } from \"react\";\n *\n * export default function SimpleSkipToMainContentExample(): ReactElement {\n *   return (\n *     <AppBar style={{ position: \"relative\" }}>\n *       <SkipToMainContent />\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}\n * @since 6.0.0 Changed the default `id` from `\"skip-to-main-content\"` to\n * `\"skip-to-main\"`.\n * @since 6.0.0 The `mainId` prop is optional\n * @since 6.0.0 Throws an error after rendering if no main element can be found\n * with the provided `mainId` in development mode. The previous behavior would\n * only log an error after being clicked.\n */\nexport const SkipToMainContent = forwardRef<\n  HTMLAnchorElement,\n  SkipToMainContentProps\n>(function SkipToMainContent(props, ref) {\n  const {\n    id = \"skip-to-main\",\n    className,\n    children = \"Skip to main content\",\n    mainId = \"\",\n    onClick = noop,\n    unstyled,\n    ...remaining\n  } = props;\n\n  const mainNodeRef = useRef<HTMLElement | null>(null);\n  // want to warn the developer about missing main element in development\n  // immediately to help prevent errors, but in production this can be lazy\n  // initialized only once a keyboard user focuses and clicks this element\n  useDevEffect(() => {\n    mainNodeRef.current = getMainElement(mainId);\n\n    if (!mainNodeRef.current) {\n      const foundMainId = document.querySelector('main,[role=\"main\"]')?.id;\n      let message = `Unable to find a main element to focus`;\n      if (mainId) {\n        message += ` with an id of \"${mainId}\"`;\n\n        if (foundMainId) {\n          message += ` but a main element was found with an id of \"${foundMainId}\".`;\n        }\n      }\n      if (!foundMainId) {\n        message +=\n          '. There should be at least one <main> element or an element with role=\"main\" on the page for accessibility.';\n      }\n\n      throw new Error(message);\n    }\n  }, [mainId]);\n\n  return (\n    <Link\n      {...remaining}\n      id={id}\n      ref={ref}\n      href={`#${mainId}`}\n      onClick={(event) => {\n        onClick(event);\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // see comment above useEffect\n        mainNodeRef.current ||= getMainElement(mainId);\n        mainNodeRef.current?.focus();\n      }}\n      className={skipToMainContent({\n        unstyled,\n        className,\n      })}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["forwardRef","useRef","useDevEffect","Link","skipToMainContent","noop","getMainElement","mainId","document","getElementById","querySelector","SkipToMainContent","props","ref","id","className","children","onClick","unstyled","remaining","mainNodeRef","current","foundMainId","message","Error","href","event","isPropagationStopped","preventDefault","stopPropagation","focus"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,EAAEC,MAAM,QAAQ,QAAQ;AAE3D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,IAAI,QAAwB,YAAY;AACjD,SAEEC,iBAAiB,QACZ,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,iBAAiB,CAACC,SACtBA,SACIC,SAASC,cAAc,CAACF,UACxBC,SAASE,aAAa,CAAc;AA6B1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,kCAAoBX,WAG/B,SAASW,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,KAAK,cAAc,EACnBC,SAAS,EACTC,WAAW,sBAAsB,EACjCT,SAAS,EAAE,EACXU,UAAUZ,IAAI,EACda,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,cAAcnB,OAA2B;IAC/C,uEAAuE;IACvE,yEAAyE;IACzE,wEAAwE;IACxEC,aAAa;QACXkB,YAAYC,OAAO,GAAGf,eAAeC;QAErC,IAAI,CAACa,YAAYC,OAAO,EAAE;YACxB,MAAMC,cAAcd,SAASE,aAAa,CAAC,uBAAuBI;YAClE,IAAIS,UAAU,CAAC,sCAAsC,CAAC;YACtD,IAAIhB,QAAQ;gBACVgB,WAAW,CAAC,gBAAgB,EAAEhB,OAAO,CAAC,CAAC;gBAEvC,IAAIe,aAAa;oBACfC,WAAW,CAAC,6CAA6C,EAAED,YAAY,EAAE,CAAC;gBAC5E;YACF;YACA,IAAI,CAACA,aAAa;gBAChBC,WACE;YACJ;YAEA,MAAM,IAAIC,MAAMD;QAClB;IACF,GAAG;QAAChB;KAAO;IAEX,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbL,IAAIA;QACJD,KAAKA;QACLY,MAAM,CAAC,CAAC,EAAElB,QAAQ;QAClBU,SAAS,CAACS;YACRT,QAAQS;YACR,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErB,8BAA8B;YAC9BT,YAAYC,OAAO,KAAKf,eAAeC;YACvCa,YAAYC,OAAO,EAAES;QACvB;QACAf,WAAWX,kBAAkB;YAC3Bc;YACAH;QACF;kBAECC;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/link/SkipToMainContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref, useRef } from \"react\";\n\nimport { useDevEffect } from \"../utils/useDevEffect.js\";\nimport { Link, type LinkProps } from \"./Link.js\";\nimport {\n  type SkipToMainContentClassNameOptions,\n  skipToMainContent,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst getMainElement = (mainId: string): HTMLElement | null =>\n  mainId\n    ? document.getElementById(mainId)\n    : document.querySelector<HTMLElement>('main,[role=\"main\"]');\n\n/**\n * @since 6.0.0 The `mainId` is optional\n */\nexport interface SkipToMainContentProps\n  extends Omit<LinkProps, \"href\">, SkipToMainContentClassNameOptions {\n  ref?: Ref<HTMLAnchorElement>;\n\n  /**\n   * @since 6.0.0 Changed default value from `\"skip-to-main-content\"`\n   * @defaultValue `\"skip-to-main\"`\n   */\n  id?: string;\n\n  /**\n   * An optional id for the main element. When this is not provided, the main\n   * element will be found by:\n   *\n   * ```ts\n   * document.querySelector('main,[role=\"main\"]');\n   * ```\n   */\n  mainId?: string;\n\n  /**\n   * @defaultValue `\"Skip to main content\"`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to allow keyboard users a quick way to skip directly\n * to the main content instead of needing to tab through all navigation items.\n *\n * This component should not be used if using the LayoutAppBar component since\n * it is already built-in.\n *\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { SkipToMainContent } from \"@react-md/core/link/SkipToMainContent\";\n * import { type ReactElement } from \"react\";\n *\n * export default function SimpleSkipToMainContentExample(): ReactElement {\n *   return (\n *     <AppBar style={{ position: \"relative\" }}>\n *       <SkipToMainContent />\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skip-to-main-content | SkipToMainContent Demos}\n * @since 6.0.0 Changed the default `id` from `\"skip-to-main-content\"` to\n * `\"skip-to-main\"`.\n * @since 6.0.0 The `mainId` prop is optional\n * @since 6.0.0 Throws an error after rendering if no main element can be found\n * with the provided `mainId` in development mode. The previous behavior would\n * only log an error after being clicked.\n */\nexport function SkipToMainContent(props: SkipToMainContentProps): ReactElement {\n  const {\n    ref,\n    id = \"skip-to-main\",\n    className,\n    children = \"Skip to main content\",\n    mainId = \"\",\n    onClick = noop,\n    unstyled,\n    ...remaining\n  } = props;\n\n  const mainNodeRef = useRef<HTMLElement | null>(null);\n  // want to warn the developer about missing main element in development\n  // immediately to help prevent errors, but in production this can be lazy\n  // initialized only once a keyboard user focuses and clicks this element\n  useDevEffect(() => {\n    mainNodeRef.current = getMainElement(mainId);\n\n    if (!mainNodeRef.current) {\n      const foundMainId = document.querySelector('main,[role=\"main\"]')?.id;\n      let message = `Unable to find a main element to focus`;\n      if (mainId) {\n        message += ` with an id of \"${mainId}\"`;\n\n        if (foundMainId) {\n          message += ` but a main element was found with an id of \"${foundMainId}\".`;\n        }\n      }\n      if (!foundMainId) {\n        message +=\n          '. There should be at least one <main> element or an element with role=\"main\" on the page for accessibility.';\n      }\n\n      throw new Error(message);\n    }\n  }, [mainId]);\n\n  return (\n    <Link\n      {...remaining}\n      id={id}\n      ref={ref}\n      href={`#${mainId}`}\n      onClick={(event) => {\n        onClick(event);\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        // see comment above useEffect\n        mainNodeRef.current ||= getMainElement(mainId);\n        mainNodeRef.current?.focus();\n      }}\n      className={skipToMainContent({\n        unstyled,\n        className,\n      })}\n    >\n      {children}\n    </Link>\n  );\n}\n"],"names":["useRef","useDevEffect","Link","skipToMainContent","noop","getMainElement","mainId","document","getElementById","querySelector","SkipToMainContent","props","ref","id","className","children","onClick","unstyled","remaining","mainNodeRef","current","foundMainId","message","Error","href","event","isPropagationStopped","preventDefault","stopPropagation","focus"],"mappings":"AAAA;;AAEA,SAAsDA,MAAM,QAAQ,QAAQ;AAE5E,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,IAAI,QAAwB,YAAY;AACjD,SAEEC,iBAAiB,QACZ,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,iBAAiB,CAACC,SACtBA,SACIC,SAASC,cAAc,CAACF,UACxBC,SAASE,aAAa,CAAc;AA+B1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EACJC,GAAG,EACHC,KAAK,cAAc,EACnBC,SAAS,EACTC,WAAW,sBAAsB,EACjCT,SAAS,EAAE,EACXU,UAAUZ,IAAI,EACda,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,cAAcnB,OAA2B;IAC/C,uEAAuE;IACvE,yEAAyE;IACzE,wEAAwE;IACxEC,aAAa;QACXkB,YAAYC,OAAO,GAAGf,eAAeC;QAErC,IAAI,CAACa,YAAYC,OAAO,EAAE;YACxB,MAAMC,cAAcd,SAASE,aAAa,CAAC,uBAAuBI;YAClE,IAAIS,UAAU,CAAC,sCAAsC,CAAC;YACtD,IAAIhB,QAAQ;gBACVgB,WAAW,CAAC,gBAAgB,EAAEhB,OAAO,CAAC,CAAC;gBAEvC,IAAIe,aAAa;oBACfC,WAAW,CAAC,6CAA6C,EAAED,YAAY,EAAE,CAAC;gBAC5E;YACF;YACA,IAAI,CAACA,aAAa;gBAChBC,WACE;YACJ;YAEA,MAAM,IAAIC,MAAMD;QAClB;IACF,GAAG;QAAChB;KAAO;IAEX,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbL,IAAIA;QACJD,KAAKA;QACLY,MAAM,CAAC,CAAC,EAAElB,QAAQ;QAClBU,SAAS,CAACS;YACRT,QAAQS;YACR,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAD,MAAME,cAAc;YACpBF,MAAMG,eAAe;YAErB,8BAA8B;YAC9BT,YAAYC,OAAO,KAAKf,eAAeC;YACvCa,YAAYC,OAAO,EAAES;QACvB;QACAf,WAAWX,kBAAkB;YAC3Bc;YACAH;QACF;kBAECC;;AAGP"}

package/dist/list/List.d.ts

@@ -1,10 +1,11 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ListClassNameOptions } from "./listStyles.js";
 export type ListElement = HTMLUListElement | HTMLOListElement;
 /**
  * @since 6.3.1 Extends the ListClassNameOptions
  */
 export interface ListProps extends HTMLAttributes<ListElement>, ListClassNameOptions {
+    ref?: Ref<ListElement>;
     /**
      * @defaultValue `"none"`
      */
@@ -60,4 +61,4 @@ export interface ListProps extends HTMLAttributes<ListElement>, ListClassNameOpt
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
  */
-export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<ListElement>>;
+export declare function List(props: ListProps): ReactElement;

package/dist/list/List.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { list } from "./listStyles.js";
 /**
  * The `List` component is used to render a collection of clickable actions
@@ -43,8 +42,8 @@ import { list } from "./listStyles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/list | List Demos}
- */ export const List = /*#__PURE__*/ forwardRef(function List(props, ref) {
-    const { className, children, role = "none", dense = false, ordered = false, horizontal = false, ...remaining } = props;
+ */ export function List(props) {
+    const { ref, className, children, role = "none", dense = false, ordered = false, horizontal = false, ...remaining } = props;
     const Component = ordered ? "ol" : "ul";
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
@@ -57,6 +56,6 @@ import { list } from "./listStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=List.js.map

package/dist/list/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ListClassNameOptions, list } from \"./listStyles.js\";\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\n/**\n * @since 6.3.1 Extends the ListClassNameOptions\n */\nexport interface ListProps\n  extends HTMLAttributes<ListElement>, ListClassNameOptions {\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n}\n\n/**\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import { ListItemLink } from \"@react-md/core/list/ListItemLink\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const List = forwardRef<ListElement, ListProps>(\n  function List(props, ref) {\n    const {\n      className,\n      children,\n      role = \"none\",\n      dense = false,\n      ordered = false,\n      horizontal = false,\n      ...remaining\n    } = props;\n    const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={list({\n          dense,\n          horizontal,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","list","List","props","ref","className","children","role","dense","ordered","horizontal","remaining","Component"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAAoCC,IAAI,QAAQ,kBAAkB;AAuBlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,MAAM,EACbC,QAAQ,KAAK,EACbC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,YAAaH,UAAU,OAAO;IACpC,qBACE,KAACG;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLG,MAAMA;QACNF,WAAWJ,KAAK;YACdO;YACAE;YACAL;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/List.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type ListClassNameOptions, list } from \"./listStyles.js\";\n\nexport type ListElement = HTMLUListElement | HTMLOListElement;\n\n/**\n * @since 6.3.1 Extends the ListClassNameOptions\n */\nexport interface ListProps\n  extends HTMLAttributes<ListElement>, ListClassNameOptions {\n  ref?: Ref<ListElement>;\n\n  /**\n   * @defaultValue `\"none\"`\n   */\n  role?: HTMLAttributes<ListElement>[\"role\"];\n\n  /**\n   * Set this to `true` to render as `<ol>` instead of `<ul>` when the children\n   * are in a specific order. For example: steps within a recipe.\n   *\n   * @defaultValue `false`\n   */\n  ordered?: boolean;\n}\n\n/**\n * The `List` component is used to render a collection of clickable actions\n * vertically or horizontally and does not include the default `ol`/`ul` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import { ListItemLink } from \"@react-md/core/list/ListItemLink\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 3\n *       </ListItem>\n *       <ListItemLink href=\"/some-route\">Link Example</ListItemLink>\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport function List(props: ListProps): ReactElement {\n  const {\n    ref,\n    className,\n    children,\n    role = \"none\",\n    dense = false,\n    ordered = false,\n    horizontal = false,\n    ...remaining\n  } = props;\n\n  const Component = (ordered ? \"ol\" : \"ul\") as \"ul\";\n  return (\n    <Component\n      {...remaining}\n      ref={ref}\n      role={role}\n      className={list({\n        dense,\n        horizontal,\n        className,\n      })}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["list","List","props","ref","className","children","role","dense","ordered","horizontal","remaining","Component"],"mappings":";AAEA,SAAoCA,IAAI,QAAQ,kBAAkB;AAyBlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,OAAO,MAAM,EACbC,QAAQ,KAAK,EACbC,UAAU,KAAK,EACfC,aAAa,KAAK,EAClB,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,YAAaH,UAAU,OAAO;IACpC,qBACE,KAACG;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLG,MAAMA;QACNF,WAAWJ,KAAK;YACdO;YACAE;YACAL;QACF;kBAECC;;AAGP"}