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

package/dist/CoreProviders.d.ts

@@ -57,6 +57,7 @@ export interface CoreProvidersProps extends ReactMDCoreConfiguration {
  * - {@link Snackbar} - This isn't a provider but this is how you can display
  *   alerts in your app
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
  * @since 6.0.0
  */
 export declare function CoreProviders(props: CoreProvidersProps): ReactElement;

package/dist/CoreProviders.js

@@ -34,6 +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
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
  * @since 6.0.0
  */ export function CoreProviders(props) {
     const { ssr = false, ssrAppSize = DEFAULT_APP_SIZE, appSizeQueries = DEFAULT_APP_SIZE_QUERIES, portalContainer, children } = props;

package/dist/CoreProviders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n  DEFAULT_APP_SIZE_QUERIES,\n} from \"./media-queries/appSize.js\";\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport {\n  type PortalContainer,\n  PortalContainerProvider,\n} from \"./portal/PortalContainerProvider.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\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"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SAGEC,gBAAgB,EAChBC,wBAAwB,QACnB,6BAA6B;AAGpC,SAEEC,uBAAuB,QAClB,sCAAsC;AA0C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n  DEFAULT_APP_SIZE_QUERIES,\n} from \"./media-queries/appSize.js\";\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport {\n  type PortalContainer,\n  PortalContainerProvider,\n} from \"./portal/PortalContainerProvider.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\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 * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}\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"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SAGEC,gBAAgB,EAChBC,wBAAwB,QACnB,6BAA6B;AAGpC,SAEEC,uBAAuB,QAClB,sCAAsC;AA0C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,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

@@ -11,7 +11,9 @@ export interface NoSsrProps {
  *
  * @example Simple Example
  * ```tsx
- * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
+ * import { NoSsr } from "@react-md/core/NoSsr";
+ * import { CoreProviders } from "@react-md/core/CoreProviders"
+ * import { Typography } from "@react-md/core/typography/Typography"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/dist/NoSsr.js

@@ -10,7 +10,9 @@ import { useSsr } from "./SsrProvider.js";
  *
  * @example Simple Example
  * ```tsx
- * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
+ * import { NoSsr } from "@react-md/core/NoSsr";
+ * import { CoreProviders } from "@react-md/core/CoreProviders"
+ * import { Typography } from "@react-md/core/typography/Typography"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/dist/NoSsr.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, useEffect, useState } from \"react\";\n\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"],"mappings":"AAAA;;AAEA,SAA4CA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE/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"}
+{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, useEffect, useState } from \"react\";\n\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 { NoSsr } from \"@react-md/core/NoSsr\";\n * import { CoreProviders } from \"@react-md/core/CoreProviders\"\n * import { Typography } from \"@react-md/core/typography/Typography\"\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"],"mappings":"AAAA;;AAEA,SAA4CA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE/E,SAASC,MAAM,QAAQ,mBAAmB;AAO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,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

@@ -38,7 +38,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
- * import { RootHtml } from "@react-md/core";
+ * import { RootHtml } from "@react-md/core/RootHtml";
  * import { type ReactElement, type PropsWithChildren } from "react";
  * import { Roboto_Flex } from "next/font/google";
  *

package/dist/RootHtml.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
- * import { RootHtml } from "@react-md/core";
+ * import { RootHtml } from "@react-md/core/RootHtml";
  * import { type ReactElement, type PropsWithChildren } from "react";
  * import { Roboto_Flex } from "next/font/google";
  *

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\";\n\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 * 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"],"mappings":";AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,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\";\n\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 * 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/RootHtml\";\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"],"mappings":";AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,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

@@ -13,6 +13,7 @@ export interface SsrProviderProps {
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/ssr-provider | SsrProvider Demos}
  * @since 6.0.0
  */
 export declare function SsrProvider(props: SsrProviderProps): ReactElement;

package/dist/SsrProvider.js

@@ -12,6 +12,7 @@ context.displayName = "Ssr";
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/ssr-provider | SsrProvider Demos}
  * @since 6.0.0
  */ export function SsrProvider(props) {
     const { ssr = false, children } = props;

package/dist/SsrProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SsrProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\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"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,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\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\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 * @see {@link https://next.react-md.dev/components/ssr-provider | SsrProvider Demos}\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"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,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;;;;;CAKC,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/_a11y.scss

@@ -0,0 +1,187 @@
+////
+/// @group core.a11y
+////
+
+@use "sass:color";
+@use "sass:list";
+@use "sass:math";
+
+/// Precomputed linear color channel values, for use in contrast calculations.
+/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+///
+/// Algorithm:
+///
+/// ```markup
+/// for c in 0 to 255:
+/// f(c) {
+///   c = c / 255;
+///   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+/// }
+/// ```
+///
+/// This lookup table is needed since there is no `pow` in SCSS/Sass. You _can_
+/// make your own, but it is recommended to pass the computed values from a
+/// 'more complete' layer (like node) as a lookup table to speed up compilation
+/// time.
+///
+/// @access private
+/// @type List
+$_linear-channel-values: (
+  0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125
+    0.00121410793419535 0.0015176349177441874 0.001821161901293025
+    0.0021246888848418626 0.0024282158683907 0.0027317428519395373
+    0.003035269835488375 0.003346535763899161 0.003676507324047436
+    0.004024717018496307 0.004391442037410293 0.004776953480693729
+    0.005181516702338386 0.005605391624202723 0.006048833022857054
+    0.006512090792594475 0.006995410187265387 0.007499032043226175
+    0.008023192985384994 0.008568125618069307 0.009134058702220787
+    0.00972121732023785 0.010329823029626936 0.010960094006488246
+    0.011612245179743885 0.012286488356915872 0.012983032342173012
+    0.013702083047289686 0.014443843596092545 0.01520851442291271
+    0.01599629336550963 0.016807375752887384 0.017641954488384078
+    0.018500220128379697 0.019382360956935723 0.0202885630566524
+    0.021219010376003555 0.022173884793387385 0.02315336617811041
+    0.024157632448504756 0.02518685962736163 0.026241221894849898
+    0.027320891639074894 0.028426039504420793 0.0295568344378088
+    0.030713443732993635 0.03189603307301153 0.033104766570885055
+    0.03433980680868217 0.03560131487502034 0.03688945040110004
+    0.0382043715953465 0.03954623527673284 0.04091519690685319
+    0.042311410620809675 0.043735029256973465 0.04518620438567554
+    0.046665086336880095 0.04817182422688942 0.04970656598412723
+    0.05126945837404324 0.052860647023180246 0.05448027644244237
+    0.05612849004960009 0.05780543019106723 0.0595112381629812
+    0.06124605423161761 0.06301001765316767 0.06480326669290577
+    0.06662593864377289 0.06847816984440017 0.07036009569659588
+    0.07227185068231748 0.07421356838014963 0.07618538148130785
+    0.07818742180518633 0.08021982031446832 0.0822827071298148
+    0.08437621154414882 0.08650046203654976 0.08865558628577294
+    0.09084171118340768 0.09305896284668745 0.0953074666309647
+    0.09758734714186246 0.09989872824711389 0.10224173308810132
+    0.10461648409110419 0.10702310297826761 0.10946171077829933
+    0.1119324278369056 0.11443537382697373 0.11697066775851084
+    0.11953842798834562 0.12213877222960187 0.12477181756095049
+    0.12743768043564743 0.1301364766903643 0.13286832155381798
+    0.13563332965520566 0.13843161503245183 0.14126329114027164
+    0.14412847085805777 0.14702726649759498 0.14995978981060856
+    0.15292615199615017 0.1559264637078274 0.1589608350608804 0.162029375639111
+    0.1651321945016676 0.16826940018969075 0.1714411007328226
+    0.17464740365558504 0.17788841598362912 0.18116424424986022
+    0.184474994500441 0.18782077230067787 0.19120168274079138 0.1946178304415758
+    0.19806931955994886 0.20155625379439707 0.20507873639031693
+    0.20863687014525575 0.21223075741405523 0.21586050011389926
+    0.2195261997292692 0.2232279573168085 0.22696587351009836
+    0.23074004852434915 0.23455058216100522 0.238397573812271
+    0.24228112246555486 0.24620132670783548 0.25015828472995344
+    0.25415209433082675 0.2581828529215958 0.26225065752969623
+    0.26635560480286247 0.2704977910130658 0.27467731206038465
+    0.2788942634768104 0.2831487404299921 0.2874408377269175 0.29177064981753587
+    0.2961382707983211 0.3005437944157765 0.3049873140698863 0.30946892281750854
+    0.31398871337571754 0.31854677812509186 0.32314320911295075
+    0.3277780980565422 0.33245153634617935 0.33716361504833037
+    0.3419144249086609 0.3467040563550296 0.35153259950043936 0.3564001441459435
+    0.3613067797835095 0.3662525955988395 0.3712376804741491 0.3762621229909065
+    0.38132601143253014 0.386429433787049 0.39157247774972326
+    0.39675523072562685 0.4019777798321958 0.4072402119017367
+    0.41254261348390375 0.4178850708481375 0.4232676699860717 0.4286904966139066
+    0.43415363617474895 0.4396571738409188 0.44520119451622786
+    0.45078578283822346 0.45641102318040466 0.4620769996544071 0.467783796112159
+    0.47353149614800955 0.4793201831008268 0.4851499400560704 0.4910208498478356
+    0.4969329950608704 0.5028864580325687 0.5088813208549338 0.5149176653765214
+    0.5209955732043543 0.5271151257058131 0.5332764040105052 0.5394794890121072
+    0.5457244613701866 0.5520114015120001 0.5583403896342679 0.5647115057049292
+    0.5711248294648731 0.5775804404296506 0.5840784178911641 0.5906188409193369
+    0.5972017883637634 0.6038273388553378 0.6104955708078648 0.6172065624196511
+    0.6239603916750761 0.6307571363461468 0.6375968739940326 0.6444796819705821
+    0.6514056374198242 0.6583748172794485 0.665387298282272 0.6724431569576875
+    0.6795424696330938 0.6866853124353135 0.6938717612919899 0.7011018919329731
+    0.7083757798916868 0.7156935005064807 0.7230551289219693 0.7304607400903537
+    0.7379104087727308 0.7454042095403874 0.7529422167760779 0.7605245046752924
+    0.768151147247507 0.7758222183174236 0.7835377915261935 0.7912979403326302
+    0.799102738014409 0.8069522576692516 0.8148465722161012 0.8227857543962835
+    0.8307698767746546 0.83879901174074 0.846873231509858 0.8549926081242338
+    0.8631572134541023 0.8713671191987972 0.8796223968878317 0.8879231178819663
+    0.8962693533742664 0.9046611743911496 0.9130986517934192 0.9215818562772946
+    0.9301108583754237 0.938685728457888 0.9473065367331999 0.9559733532492861
+    0.9646862478944651 0.9734452903984125 0.9822505503331171 0.9911020971138298
+    1
+);
+
+/// Calculate the luminance for a color.
+///
+/// @access private
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// @param {Color} color - The color to check
+/// @returns {Number} A number representing the luminance for the color.
+@function _luminance($color) {
+  $red: list.nth(
+    $_linear-channel-values,
+    math.round(color.channel($color, "red")) + 1
+  );
+  $red-multiplier: 0.2126;
+  $green: list.nth(
+    $_linear-channel-values,
+    math.round(color.channel($color, "green")) + 1
+  );
+  $green-multiplier: 0.7152;
+  $blue: list.nth(
+    $_linear-channel-values,
+    math.round(color.channel($color, "blue")) + 1
+  );
+  $blue-multiplier: 0.0722;
+
+  @return ($red * $red-multiplier) + ($green * $green-multiplier) +
+    ($blue * $blue-multiplier);
+}
+
+/// Gets the contrast between two colors.
+///
+/// @access private
+/// @param {Color} back - The background color
+/// @param {Color} front - The foreground color that should be compared to the
+/// background color for contrast ratio.
+/// @returns {Number} The contrast ratio between the background and foreground
+/// colors
+@function _contrast($back, $front) {
+  $back-luminance: _luminance($back) + 0.05;
+  $front-luminance: _luminance($front) + 0.05;
+
+  @return math.div(
+    max($back-luminance, $front-luminance),
+    min($back-luminance, $front-luminance)
+  );
+}
+
+/// Gets the contrast between two colors. The contrast ratios between background
+/// and foreground colors should be:
+/// - 3 for large text (18pt normal or 14pt bold)
+/// - 4.5 for normal text
+/// - 7.1 for Level AAA requirements.
+///
+/// NOTE: This does not account for font size or font weight but should be good
+/// enough for most cases.
+///
+/// @example scss
+///   $background-color: #fafafa;
+///
+///   .container {
+///     background-color: $background-color;
+///     color: contrast-color($background-color);
+///   }
+///
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @param {Color} background-color - The background color to check
+/// @param {Color} light-color - The light text color to use if it has a better
+/// contrast ratio.
+/// @param {Color} dark-color - The dark text color to use if it has a better
+/// contrast ratio.
+/// @returns {Color} The color with the highest contrast ratio
+@function contrast-color(
+  $background-color,
+  $light-color: #fff,
+  $dark-color: #000
+) {
+  $light-contrast: _contrast($background-color, $light-color);
+  $dark-contrast: _contrast($background-color, $dark-color);
+
+  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
+}