@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/dist/CoreProviders.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement, type ReactNode } from "react";
 import { type AppSize, type AppSizeQueries } from "./media-queries/appSize.js";
 import { type PortalContainer } from "./portal/PortalContainerProvider.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ReactMDCoreConfiguration {
     /**
      * Set this to `true` if you are using SSR. This will update some hook
@@ -24,7 +24,7 @@ export interface ReactMDCoreConfiguration {
     /** @see {@link PortalContainerProvider} */
     portalContainer?: PortalContainer;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CoreProvidersProps extends ReactMDCoreConfiguration {
     children: ReactNode;
 }
@@ -57,6 +57,6 @@ export interface CoreProvidersProps extends ReactMDCoreConfiguration {
  * - {@link Snackbar} - This isn't a provider but this is how you can display
  *   alerts in your app
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function CoreProviders(props: CoreProvidersProps): ReactElement;

package/dist/CoreProviders.js

@@ -34,7 +34,7 @@ import { PortalContainerProvider } from "./portal/PortalContainerProvider.js";
  * - {@link Snackbar} - This isn't a provider but this is how you can display
  *   alerts in your app
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function CoreProviders(props) {
     const { ssr = false, ssrAppSize = DEFAULT_APP_SIZE, appSizeQueries = DEFAULT_APP_SIZE_QUERIES, portalContainer, children } = props;
     return /*#__PURE__*/ _jsx(SsrProvider, {

package/dist/CoreProviders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n  DEFAULT_APP_SIZE,\n  DEFAULT_APP_SIZE_QUERIES,\n  type AppSize,\n  type AppSizeQueries,\n} from \"./media-queries/appSize.js\";\nimport {\n  PortalContainerProvider,\n  type PortalContainer,\n} from \"./portal/PortalContainerProvider.js\";\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @remarks \\@since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n  /**\n   * Set this to `true` if you are using SSR. This will update some hook\n   * behavior so that you will not have mismatched initial state between server\n   * and client and correctly rehydrate after initial render.\n   *\n   * @defaultValue `false`\n   */\n  ssr?: boolean;\n\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   */\n  ssrAppSize?: Readonly<AppSize>;\n\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n   * @see {@link DEFAULT_APP_SIZE_QUERIES}\n   */\n  appSizeQueries?: Readonly<AppSizeQueries>;\n\n  /** @see {@link PortalContainerProvider} */\n  portalContainer?: PortalContainer;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n *   on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n *   you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n *   rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n *   `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n *   immediately for a time after another tooltip has become visible. You can\n *   also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n *   alerts in your app\n *\n * @remarks \\@since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n  const {\n    ssr = false,\n    ssrAppSize = DEFAULT_APP_SIZE,\n    appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n    portalContainer,\n    children,\n  } = props;\n  return (\n    <SsrProvider ssr={ssr}>\n      <PortalContainerProvider container={portalContainer}>\n        <UserInteractionModeProvider>\n          <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n            {children}\n          </AppSizeProvider>\n        </UserInteractionModeProvider>\n      </PortalContainerProvider>\n    </SsrProvider>\n  );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SACEC,gBAAgB,EAChBC,wBAAwB,QAGnB,6BAA6B;AACpC,SACEC,uBAAuB,QAElB,sCAAsC;AA4C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}
+{"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n  DEFAULT_APP_SIZE,\n  DEFAULT_APP_SIZE_QUERIES,\n  type AppSize,\n  type AppSizeQueries,\n} from \"./media-queries/appSize.js\";\nimport {\n  PortalContainerProvider,\n  type PortalContainer,\n} from \"./portal/PortalContainerProvider.js\";\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n  /**\n   * Set this to `true` if you are using SSR. This will update some hook\n   * behavior so that you will not have mismatched initial state between server\n   * and client and correctly rehydrate after initial render.\n   *\n   * @defaultValue `false`\n   */\n  ssr?: boolean;\n\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   */\n  ssrAppSize?: Readonly<AppSize>;\n\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n   * @see {@link DEFAULT_APP_SIZE_QUERIES}\n   */\n  appSizeQueries?: Readonly<AppSizeQueries>;\n\n  /** @see {@link PortalContainerProvider} */\n  portalContainer?: PortalContainer;\n}\n\n/** @since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n *   on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n *   you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n *   rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n *   `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n *   immediately for a time after another tooltip has become visible. You can\n *   also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n *   alerts in your app\n *\n * @since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n  const {\n    ssr = false,\n    ssrAppSize = DEFAULT_APP_SIZE,\n    appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n    portalContainer,\n    children,\n  } = props;\n  return (\n    <SsrProvider ssr={ssr}>\n      <PortalContainerProvider container={portalContainer}>\n        <UserInteractionModeProvider>\n          <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n            {children}\n          </AppSizeProvider>\n        </UserInteractionModeProvider>\n      </PortalContainerProvider>\n    </SsrProvider>\n  );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SACEC,gBAAgB,EAChBC,wBAAwB,QAGnB,6BAA6B;AACpC,SACEC,uBAAuB,QAElB,sCAAsC;AA4C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}

package/dist/NoSsr.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NoSsrProps {
     children: ReactNode;
 }
@@ -9,8 +9,7 @@ export interface NoSsrProps {
  * A small wrapper that can be used to render children client side only. The
  * main use-case are for components that rely on browser API to work correctly.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -37,6 +36,6 @@ export interface NoSsrProps {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function NoSsr(props: NoSsrProps): ReactElement;

package/dist/NoSsr.js

@@ -8,8 +8,7 @@ import { useSsr } from "./SsrProvider.js";
  * A small wrapper that can be used to render children client side only. The
  * main use-case are for components that rely on browser API to work correctly.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -36,7 +35,7 @@ import { useSsr } from "./SsrProvider.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function NoSsr(props) {
     const { children } = props;
     const ssr = useSsr();

package/dist/NoSsr.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, type ReactElement, type ReactNode } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface NoSsrProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A small wrapper that can be used to render children client side only. The\n * main use-case are for components that rely on browser API to work correctly.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { CoreProviders, NoSsr, Typography } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Typography>This is always rendered.</Typography>\n *       <NoSsr>\n *         <Typography>\n *           This is only rendered client-side after rehydrating.\n *         </Typography>\n *       </NoSsr>\n *     </>\n *   );\n * }\n *\n * function App(): ReactElement {\n *   return (\n *     <CoreProviders ssr>\n *       <Example />\n *     </CoreProviders>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function NoSsr(props: NoSsrProps): ReactElement {\n  const { children } = props;\n  const ssr = useSsr();\n  const [rendered, setRendered] = useState(!ssr);\n  useEffect(() => {\n    setRendered(true);\n  }, []);\n\n  return <>{rendered && children}</>;\n}\n"],"names":["useEffect","useState","useSsr","NoSsr","props","children","ssr","rendered","setRendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,QAAQ,QAA2C,QAAQ;AAC/E,SAASC,MAAM,QAAQ,mBAAmB;AAO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,MAAMJ;IACZ,MAAM,CAACK,UAAUC,YAAY,GAAGP,SAAS,CAACK;IAC1CN,UAAU;QACRQ,YAAY;IACd,GAAG,EAAE;IAEL,qBAAO;kBAAGD,YAAYF;;AACxB"}
+{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, type ReactElement, type ReactNode } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\n\n/** @since 6.0.0 */\nexport interface NoSsrProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A small wrapper that can be used to render children client side only. The\n * main use-case are for components that rely on browser API to work correctly.\n *\n * @example Simple Example\n * ```tsx\n * import { CoreProviders, NoSsr, Typography } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Typography>This is always rendered.</Typography>\n *       <NoSsr>\n *         <Typography>\n *           This is only rendered client-side after rehydrating.\n *         </Typography>\n *       </NoSsr>\n *     </>\n *   );\n * }\n *\n * function App(): ReactElement {\n *   return (\n *     <CoreProviders ssr>\n *       <Example />\n *     </CoreProviders>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function NoSsr(props: NoSsrProps): ReactElement {\n  const { children } = props;\n  const ssr = useSsr();\n  const [rendered, setRendered] = useState(!ssr);\n  useEffect(() => {\n    setRendered(true);\n  }, []);\n\n  return <>{rendered && children}</>;\n}\n"],"names":["useEffect","useState","useSsr","NoSsr","props","children","ssr","rendered","setRendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,QAAQ,QAA2C,QAAQ;AAC/E,SAASC,MAAM,QAAQ,mBAAmB;AAO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,MAAMJ;IACZ,MAAM,CAACK,UAAUC,YAAY,GAAGP,SAAS,CAACK;IAC1CN,UAAU;QACRQ,YAAY;IACd,GAAG,EAAE;IAEL,qBAAO;kBAAGD,YAAYF;;AACxB"}

package/dist/RootHtml.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type HtmlHTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { type PropsWithRef } from "./types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
     /** @defaultValue `"ltr"` */
@@ -37,8 +37,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * passed to the root `<html>` and `<body>` elements and children can be
  * rendered before and after the `<body>` if needed.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
  * import { RootHtml } from "@react-md/core";
@@ -57,6 +56,6 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function RootHtml(props: RootHtmlProps): ReactElement;

package/dist/RootHtml.js

@@ -7,8 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * passed to the root `<html>` and `<body>` elements and children can be
  * rendered before and after the `<body>` if needed.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
  * import { RootHtml } from "@react-md/core";
@@ -27,7 +26,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function RootHtml(props) {
     const { dir = "ltr", lang = "en", children, bodyProps, bodyClassName, beforeBodyChildren, afterBodyChildren, ...remaining } = props;
     return /*#__PURE__*/ _jsxs("html", {

package/dist/RootHtml.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type HtmlHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n  /** @defaultValue `\"ltr\"` */\n  dir?: string;\n\n  /** @defaultValue `\"en\"` */\n  lang?: string;\n\n  /**\n   * Any additional props to provide to the `<body>` element and also supports a\n   * `ref` if that is required for some reason. Using a `ref` would make your\n   * root layout a client component though.\n   */\n  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n  /**\n   * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n   */\n  bodyClassName?: string;\n\n  /**\n   * Any content to render before the `<body>` tag. This can be useful if you\n   * need to render a custom `<head>` element.\n   */\n  beforeBodyChildren?: ReactNode;\n\n  /**\n   * Any content to render after the `<body>` tag. This can be useful to insert\n   * `<script>` tags for analytics or other external libraries.\n   */\n  afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example\n * Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n *   subsets: [\"latin\"],\n *   variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n *   const { children } = props;\n *\n *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n  const {\n    dir = \"ltr\",\n    lang = \"en\",\n    children,\n    bodyProps,\n    bodyClassName,\n    beforeBodyChildren,\n    afterBodyChildren,\n    ...remaining\n  } = props;\n\n  return (\n    <html dir={dir} lang={lang} {...remaining}>\n      {beforeBodyChildren}\n      <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n        {children}\n      </body>\n      {afterBodyChildren}\n    </html>\n  );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}
+{"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type HtmlHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n  /** @defaultValue `\"ltr\"` */\n  dir?: string;\n\n  /** @defaultValue `\"en\"` */\n  lang?: string;\n\n  /**\n   * Any additional props to provide to the `<body>` element and also supports a\n   * `ref` if that is required for some reason. Using a `ref` would make your\n   * root layout a client component though.\n   */\n  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n  /**\n   * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n   */\n  bodyClassName?: string;\n\n  /**\n   * Any content to render before the `<body>` tag. This can be useful if you\n   * need to render a custom `<head>` element.\n   */\n  beforeBodyChildren?: ReactNode;\n\n  /**\n   * Any content to render after the `<body>` tag. This can be useful to insert\n   * `<script>` tags for analytics or other external libraries.\n   */\n  afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n *   subsets: [\"latin\"],\n *   variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n *   const { children } = props;\n *\n *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n  const {\n    dir = \"ltr\",\n    lang = \"en\",\n    children,\n    bodyProps,\n    bodyClassName,\n    beforeBodyChildren,\n    afterBodyChildren,\n    ...remaining\n  } = props;\n\n  return (\n    <html dir={dir} lang={lang} {...remaining}>\n      {beforeBodyChildren}\n      <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n        {children}\n      </body>\n      {afterBodyChildren}\n    </html>\n  );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}

package/dist/SsrProvider.d.ts

@@ -1,10 +1,10 @@
 import { type ReactElement, type ReactNode } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useSsr(): boolean;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SsrProviderProps {
     ssr?: boolean;
@@ -13,6 +13,6 @@ export interface SsrProviderProps {
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function SsrProvider(props: SsrProviderProps): ReactElement;

package/dist/SsrProvider.js

@@ -5,14 +5,14 @@ const context = /*#__PURE__*/ createContext(false);
 const { Provider } = context;
 context.displayName = "Ssr";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useSsr() {
     return useContext(context);
 }
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function SsrProvider(props) {
     const { ssr = false, children } = props;
     const [isSsr, setSsr] = useState(ssr);

package/dist/SsrProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SsrProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nconst context = createContext(false);\nconst { Provider } = context;\ncontext.displayName = \"Ssr\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSsr(): boolean {\n  return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SsrProviderProps {\n  ssr?: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport function SsrProvider(props: SsrProviderProps): ReactElement {\n  const { ssr = false, children } = props;\n  const [isSsr, setSsr] = useState(ssr);\n  useEffect(() => {\n    setSsr(false);\n  }, []);\n  return <Provider value={isSsr}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","context","Provider","displayName","useSsr","SsrProvider","props","ssr","children","isSsr","setSsr","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAGH,QAAQ;AAEf,MAAMC,wBAAUJ,cAAc;AAC9B,MAAM,EAAEK,QAAQ,EAAE,GAAGD;AACrBA,QAAQE,WAAW,GAAG;AAEtB;;CAEC,GACD,OAAO,SAASC;IACd,OAAON,WAAWG;AACpB;AAUA;;;;CAIC,GACD,OAAO,SAASI,YAAYC,KAAuB;IACjD,MAAM,EAAEC,MAAM,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAClC,MAAM,CAACG,OAAOC,OAAO,GAAGV,SAASO;IACjCR,UAAU;QACRW,OAAO;IACT,GAAG,EAAE;IACL,qBAAO,KAACR;QAASS,OAAOF;kBAAQD;;AAClC"}
+{"version":3,"sources":["../src/SsrProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nconst context = createContext(false);\nconst { Provider } = context;\ncontext.displayName = \"Ssr\";\n\n/**\n * @since 6.0.0\n */\nexport function useSsr(): boolean {\n  return useContext(context);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SsrProviderProps {\n  ssr?: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @since 6.0.0\n */\nexport function SsrProvider(props: SsrProviderProps): ReactElement {\n  const { ssr = false, children } = props;\n  const [isSsr, setSsr] = useState(ssr);\n  useEffect(() => {\n    setSsr(false);\n  }, []);\n  return <Provider value={isSsr}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","context","Provider","displayName","useSsr","SsrProvider","props","ssr","children","isSsr","setSsr","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAGH,QAAQ;AAEf,MAAMC,wBAAUJ,cAAc;AAC9B,MAAM,EAAEK,QAAQ,EAAE,GAAGD;AACrBA,QAAQE,WAAW,GAAG;AAEtB;;CAEC,GACD,OAAO,SAASC;IACd,OAAON,WAAWG;AACpB;AAUA;;;;CAIC,GACD,OAAO,SAASI,YAAYC,KAAuB;IACjD,MAAM,EAAEC,MAAM,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAClC,MAAM,CAACG,OAAOC,OAAO,GAAGV,SAASO;IACjCR,UAAU;QACRW,OAAO;IACT,GAAG,EAAE;IACL,qBAAO,KAACR;QAASS,OAAOF;kBAAQD;;AAClC"}

package/dist/_box-shadows.scss

@@ -1,4 +1,7 @@
+@use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
 @use "sass:string";
 @use "theme/theme";
 @use "transition/transition";
@@ -92,7 +95,7 @@ $box-shadow-3-layers: (
 ) !default;
 
 @function box-shadow($z-value, $color: $box-shadow-color, $opacity-boost: 0) {
-  @if type-of($z-value) != "number" or not unitless($z-value) {
+  @if meta.type-of($z-value) != "number" or not math.is-unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
   }
 
@@ -157,10 +160,10 @@ $box-shadow-3-layers: (
       transition: opacity $duration transition.$linear-timing-function;
     }
 
-    @if type-of($active-selectors) == string {
+    @if meta.type-of($active-selectors) == string {
       $active-string: $active-selectors + $suffix;
-    } @else if type-of($active-selectors) == list {
-      @for $i from 1 to length($active-selectors) + 1 {
+    } @else if meta.type-of($active-selectors) == list {
+      @for $i from 1 to list.length($active-selectors) + 1 {
         $selector: list.nth($active-selectors, $i);
 
         $prefix: $active-string + if($i > 1, ", ", "");

package/dist/_core.scss

@@ -33,11 +33,14 @@
 @forward "expansion-panel/expansion-panel" as expansion-panel-*;
 @forward "menu/menu" as menu-*;
 @forward "form/form" as form-*;
+@forward "autocomplete/autocomplete" as autocomplete-*;
 @forward "layout/layout" as layout-*;
+@forward "navigation/navigation" as navigation-*;
 @forward "segmented-button/segmented-button" as segmented-button-*;
 
-@use "avatar/avatar";
 @use "app-bar/app-bar";
+@use "autocomplete/autocomplete";
+@use "avatar/avatar";
 @use "box/box";
 @use "button/button";
 @use "segmented-button/segmented-button";
@@ -69,6 +72,7 @@
 @use "menu/menu";
 @use "form/form";
 @use "layout/layout";
+@use "navigation/navigation";
 @use "utils";
 
 $_layer-order: (
@@ -100,7 +104,9 @@ $_layer-order: (
   window-splitter,
   menu,
   form,
+  autocomplete,
   layout,
+  navigation,
   snackbar,
   segmented-button,
   utils
@@ -348,6 +354,7 @@ $_layer-order: (
   @include link.variables;
   @include list.variables;
   @include menu.variables;
+  @include navigation.variables;
   @include overlay.variables;
   @include progress.variables;
   @include segmented-button.variables;
@@ -378,6 +385,7 @@ $_layer-order: (
   }
 
   @include app-bar.styles($disable-layer);
+  @include autocomplete.styles($disable-layer);
   @include avatar.styles($disable-layer);
   @include badge.styles($disable-layer);
   @include box.styles($disable-layer);
@@ -395,6 +403,7 @@ $_layer-order: (
   @include link.styles($disable-layer);
   @include list.styles($disable-layer);
   @include menu.styles($disable-layer);
+  @include navigation.styles($disable-layer);
   @include overlay.styles($disable-layer);
   @include progress.styles($disable-layer);
   @include responsive-item.styles($disable-layer);

package/dist/_utils.scss

@@ -1,7 +1,7 @@
-@use "sass:string";
+@use "sass:list";
 @use "sass:map";
 @use "sass:meta";
-@use "sass:list";
+@use "sass:string";
 
 $disable-rtl: false !default;
 $disable-validation: false !default;
@@ -67,7 +67,7 @@ $_swappable-properties: text-align;
   }
 
   $choices: if($is-map, map.keys($list-or-map), $list-or-map);
-  @if not index($choices, $key-or-value) {
+  @if not list.index($choices, $key-or-value) {
     @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
   }
 

package/dist/app-bar/AppBar.d.ts

@@ -33,7 +33,7 @@ export type AppBarTheme = BackgroundColor | "clear";
  * - `"prominent-dense"` - defaults to `6rem` (`$prominent-dense-height`)
  */
 export type AppBarHeight = "auto" | "normal" | "prominent" | "dense" | "prominent-dense";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
     className?: string;
     /**
@@ -77,7 +77,7 @@ export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
      * `true` when the {@link position} prop is `true` so that once dialogs and menus
      * become visible the contents in the app bar do not need to be repainted.
      *
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      * @defaultValue `position === "fixed"`
      */
     scrollbarOffset?: boolean;
@@ -86,25 +86,24 @@ export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
  * Apply the `className`s for a tree component. This will be type-safe if using
  * typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function appBar(options?: AppBarClassNameOptions): string;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
     className: string;
 }>;
 /**
- * @remarks
- * \@since 6.0.0 Renamed the `component` prop to `as` and updated the default
+ * @since 6.0.0 Renamed the `component` prop to `as` and updated the default
  * value to be a `"div"` when `fixed` is `false`.
- * \@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to
+ * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to
  * match naming conventions when a feature is enabled by default.
- * \@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are
+ * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are
  * no longer required.
- * \@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop
+ * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop
  * which enables position `fixed` or `sticky` behavior.
- * \@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
+ * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
  */
 export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
     /** @defaultValue `fixed ? "header" : "div"` */
@@ -113,8 +112,7 @@ export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClass
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { AppBar, AppBarTitle, Button } from "@react-md/core";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
@@ -132,8 +130,7 @@ export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClass
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
+ * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */
 export declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/app-bar/AppBar.js

@@ -9,7 +9,7 @@ const styles = bem("rmd-app-bar");
  * Apply the `className`s for a tree component. This will be type-safe if using
  * typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function appBar(options = {}) {
     const { className, theme = "primary", stacked, height = stacked ? "auto" : "normal", position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", align, grid, gridColumns, gridName, justify, reversed, surfaceColor, disableWrap = true, disablePadding, disableElevation } = options;
     const surface = theme === "surface";
@@ -43,8 +43,7 @@ const styles = bem("rmd-app-bar");
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { AppBar, AppBarTitle, Button } from "@react-md/core";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
@@ -62,8 +61,7 @@ const styles = bem("rmd-app-bar");
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
+ * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
     const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;

package/dist/app-bar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n  cssUtils,\n  type BackgroundColor,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height,\n      align,\n      grid,\n      gridName,\n      justify,\n      reversed,\n      gridColumns,\n      disableWrap,\n      disablePadding,\n      position,\n      pagePosition,\n      surfaceColor,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          className,\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          scrollbarOffset,\n          height,\n          grid,\n          gridName,\n          gridColumns,\n          align,\n          stacked,\n          justify,\n          reversed,\n          surfaceColor,\n          disableWrap,\n          disablePadding,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n  cssUtils,\n  type BackgroundColor,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height,\n      align,\n      grid,\n      gridName,\n      justify,\n      reversed,\n      gridColumns,\n      disableWrap,\n      disablePadding,\n      position,\n      pagePosition,\n      surfaceColor,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          className,\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          scrollbarOffset,\n          height,\n          grid,\n          gridName,\n          gridColumns,\n          align,\n          stacked,\n          justify,\n          reversed,\n          surfaceColor,\n          disableWrap,\n          disablePadding,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA4BA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}

package/dist/app-bar/AppBarTitle.d.ts

@@ -10,10 +10,10 @@ import { type TypographyType } from "../typography/typographyStyles.js";
  * - `"list"` - this should be used when the title should align with the list
  *   item keyline and there is no nav icon before.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type AppBarTitleKeyline = "small" | "nav" | "list";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AppBarTitleClassNameOptions {
     className?: string;
     /**
@@ -26,11 +26,11 @@ export interface AppBarTitleClassNameOptions {
  * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
  * if using typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function appBarTitle(options?: AppBarTitleClassNameOptions): string;
 /**
- * @remarks \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
+ * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
  * `AppBarTitle` does not line wrap by default.
  */
 export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameOptions {
@@ -44,8 +44,7 @@ export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameO
 /**
  * **Server Component**
  *
- * @example
- * Updating the Keyline
+ * @example Updating the Keyline
  * ```tsx
  * import { AppBar, AppBarTitle } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -61,10 +60,9 @@ export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameO
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
+ * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
  * does not line wrap by default.
- * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
  */
 export declare const AppBarTitle: import("react").ForwardRefExoticComponent<AppBarTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/app-bar/AppBarTitle.js

@@ -8,7 +8,7 @@ const styles = bem("rmd-app-bar-title");
  * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
  * if using typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function appBarTitle(options = {}) {
     const { className, keyline = "small" } = options;
     return cnb(styles({
@@ -19,8 +19,7 @@ const styles = bem("rmd-app-bar-title");
 /**
  * **Server Component**
  *
- * @example
- * Updating the Keyline
+ * @example Updating the Keyline
  * ```tsx
  * import { AppBar, AppBarTitle } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -36,10 +35,9 @@ const styles = bem("rmd-app-bar-title");
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
+ * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
  * does not line wrap by default.
- * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
  */ export const AppBarTitle = /*#__PURE__*/ forwardRef(function AppBarTitle(props, ref) {
     const { type = "headline-6", keyline = "small", children, className, textOverflow = "ellipsis", ...remaining } = props;

package/dist/app-bar/AppBarTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-app-bar-title\");\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @remarks \\@since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    styles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the\n * `AppBarTitle` does not line wrap by default.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`\n * does not line wrap by default.\n * \\@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","bem","styles","appBarTitle","options","className","keyline","AppBarTitle","props","ref","type","children","textOverflow","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyBnB;;;;;CAKC,GACD,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,UAAU,OAAO,EAAE,GAAGF;IACzC,OAAON,IACLI,OAAO;QACLI,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACAD;AAEJ;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAME,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBJ,UAAU,OAAO,EACjBK,QAAQ,EACRN,SAAS,EACTO,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGL;IACJ,qBACE,KAACR;QACE,GAAGa,SAAS;QACbJ,KAAKA;QACLC,MAAMA;QACNL,WAAWF,YAAY;YACrBG;YACAD;QACF;QACAO,cAAcA;kBAEbD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-app-bar-title\");\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    styles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the\n * `AppBarTitle` does not line wrap by default.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * **Server Component**\n *\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`\n * does not line wrap by default.\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","bem","styles","appBarTitle","options","className","keyline","AppBarTitle","props","ref","type","children","textOverflow","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyBnB;;;;;CAKC,GACD,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,UAAU,OAAO,EAAE,GAAGF;IACzC,OAAON,IACLI,OAAO;QACLI,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACAD;AAEJ;AAkBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAME,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBJ,UAAU,OAAO,EACjBK,QAAQ,EACRN,SAAS,EACTO,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGL;IACJ,qBACE,KAACR;QACE,GAAGa,SAAS;QACbJ,KAAKA;QACLC,MAAMA;QACNL,WAAWF,YAAY;YACrBG;YACAD;QACF;QACAO,cAAcA;kBAEbD;;AAGP,GACA"}