@react-md/core 1.0.0-next.2 → 1.0.0-next.4

package/dist/form/_form.scss

@@ -190,7 +190,7 @@ $switch-track-horizontal-padding: 0.875em !default;
 $switch-track-light-background-color: colors.$grey-400 !default;
 $switch-track-dark-background-color: if(
   theme.$disable-dark-elevation,
-  $switch-track-light-theme-background-color,
+  $switch-track-light-background-color,
   map.get(theme.$dark-elevation-colors, 24)
 ) !default;
 $switch-track-background-color: theme.get-default-color(
@@ -427,8 +427,14 @@ $variables: (
 }
 
 @mixin file-input-styles {
-  .rmd-file-input:focus-within::before {
-    @include utils.keyboard-only {
+  @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+    .rmd-file-input:focus-within::before {
+      @include utils.keyboard-only {
+        @include interaction.focus-styles;
+      }
+    }
+  } @else {
+    .rmd-file-input:has(:focus-visible)::before {
       @include interaction.focus-styles;
     }
   }
@@ -1193,7 +1199,14 @@ $variables: (
 @mixin input-toggle-styles {
   .rmd-input-toggle {
     @include interaction.surface(
-      $focus-selector: "&:focus-within",
+      $focus-selector:
+        if(
+          utils.$disable-has-selectors or utils.$disable-focus-visible,
+          "&:focus-within",
+          "&:has(:focus-visible)"
+        ),
+      $keyboard-only-focus: utils.$disable-has-selectors or
+        utils.$disable-focus-visible,
       $disabled-selector: "&--disabled",
       $higher-contrast: false
     );
@@ -1280,8 +1293,14 @@ $variables: (
     }
 
     &__input {
-      @include utils.keyboard-only {
-        &:focus + .rmd-switch__ball::before {
+      @if utils.$disable-focus-visible {
+        @include utils.keyboard-only {
+          &:focus + .rmd-switch__ball::before {
+            @include interaction.focus-styles;
+          }
+        }
+      } @else {
+        &:focus-visible + .rmd-switch__ball::before {
           @include interaction.focus-styles;
         }
       }
@@ -1613,18 +1632,6 @@ $variables: (
       background-color,
       if($slider-track-color, slider-color, slider-active-color)
     );
-    @include utils.keyboard-only {
-      &:focus::after {
-        transform: scale($slider-thumb-focus-scale);
-      }
-    }
-    @include utils.touch-only {
-      &:hover::after,
-      &--active:after,
-      &--active:hover::after {
-        transform: none;
-      }
-    }
 
     border-radius: $slider-thumb-border-radius;
     height: $slider-thumb-size;
@@ -1642,13 +1649,24 @@ $variables: (
         $slider-transition-timing-function;
     }
 
-    &:hover::after {
-      transform: scale($slider-thumb-focus-scale);
+    @if utils.$disable-focus-visible {
+      @include utils.keyboard-only {
+        &:focus::after {
+          transform: scale($slider-thumb-focus-scale);
+        }
+      }
+    } @else {
+      &:focus-visible::after {
+        transform: scale($slider-thumb-focus-scale);
+      }
     }
 
-    &--active::after,
-    &--active:hover::after {
-      transform: scale($slider-thumb-active-scale);
+    @include utils.mouse-hover(false) {
+      &:hover::after,
+      &--active::after,
+      &--active:hover::after {
+        transform: scale($slider-thumb-active-scale);
+      }
     }
 
     &--animate {

package/dist/icon/_icon.scss

@@ -108,6 +108,11 @@ $variables: (
     @include set-var(symbol-weight, $symbol-weight);
     @include set-var(symbol-optical-size, $symbol-optical-size);
   }
+
+  @if not $disable-rotator {
+    @include set-var(rotate-from, $rotate-from);
+    @include set-var(rotate-to, $rotate-to);
+  }
 }
 
 @mixin styles {
@@ -170,13 +175,13 @@ $variables: (
 
       @if not $disable-spacing-above {
         &--above {
-          @include use-var(margin-top, spacing);
+          @include use-var(margin-bottom, spacing);
         }
       }
 
       @if not $disable-spacing-below {
         &--below {
-          @include use-var(margin-bottom, spacing);
+          @include use-var(margin-top, spacing);
         }
       }
 

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./button/AsyncButton.js";
 export * from "./button/Button.js";
 export * from "./button/ButtonUnstyled.js";
 export * from "./button/FloatingActionButton.js";
+export * from "./button/TooltippedButton.js";
 export * from "./button/buttonStyles.js";
 export * from "./button/buttonUnstyledStyles.js";
 export * from "./card/Card.js";
@@ -21,6 +22,7 @@ export * from "./card/CardFooter.js";
 export * from "./card/CardHeader.js";
 export * from "./card/CardSubtitle.js";
 export * from "./card/CardTitle.js";
+export * from "./card/ClickableCard.js";
 export * from "./card/styles.js";
 export * from "./chip/Chip.js";
 export * from "./chip/styles.js";
@@ -257,6 +259,7 @@ export * from "./transition/Slide.js";
 export * from "./transition/SlideContainer.js";
 export * from "./transition/config.js";
 export * from "./transition/maxWidthTransition.js";
+export * from "./transition/skeletonPlaceholderUtils.js";
 export * from "./transition/types.js";
 export * from "./transition/useCSSTransition.js";
 export * from "./transition/useCarousel.js";
@@ -288,6 +291,7 @@ export * from "./typography/WritingDirectionProvider.js";
 export * from "./useAsyncAction.js";
 export * from "./useDebouncedFunction.js";
 export * from "./useDropzone.js";
+export * from "./useElementSize.js";
 export * from "./useEnsuredId.js";
 export * from "./useEnsuredRef.js";
 export * from "./useHtmlClassName.js";
@@ -308,6 +312,7 @@ export * from "./utils/applyRef.js";
 export * from "./utils/bem.js";
 export * from "./utils/filters.js";
 export * from "./utils/getClientPosition.js";
+export * from "./utils/getMiddleOfRange.js";
 export * from "./utils/getPercentage.js";
 export * from "./utils/getRangeDefaultValue.js";
 export * from "./utils/getRangeSteps.js";

package/dist/interaction/_interaction.scss

@@ -284,7 +284,8 @@ $variables: (
 }
 
 @mixin surface(
-  $focus-selector: "&:focus",
+  $focus-selector: "&:focus" + if(utils.$disable-focus-visible, "", "-visible"),
+  $keyboard-only-focus: utils.$disable-focus-visible,
   $disabled-selector: "&:disabled",
   $clickable: true,
   $hoverable: true,
@@ -322,7 +323,13 @@ $variables: (
   }
 
   @if $focus-selector {
-    @include utils.keyboard-only($css-modules) {
+    @if $keyboard-only-focus {
+      @include utils.keyboard-only($css-modules) {
+        #{$focus-selector + "::before"} {
+          @include focus-styles($box-shadow, $disable-background);
+        }
+      }
+    } @else {
       #{$focus-selector + "::before"} {
         @include focus-styles($box-shadow, $disable-background);
       }
@@ -330,13 +337,9 @@ $variables: (
   }
 
   @if $hoverable {
-    &:hover::before {
-      @include set-var(background-color, get-var(hover-background-color));
-    }
-
-    @include utils.touch-only {
-      &:hover::before {
-        @include set-var(background-color, transparent);
+    @include utils.mouse-hover {
+      &::before {
+        @include set-var(background-color, get-var(hover-background-color));
       }
     }
 

package/dist/link/_link.scss

@@ -26,7 +26,7 @@ $skip-to-main-styles: (
   z-index: $skip-to-main-z-index,
 ) !default;
 $skip-to-main-active-styles: (
-  outline: 0.25rem dashed #000,
+  outline: 0.25rem dashed currentcolor,
 ) !default;
 
 $variables: (color, visited-color, hover-color);
@@ -75,14 +75,6 @@ $variables: (color, visited-color, hover-color);
 @mixin styles {
   @if not $disable-everything {
     .rmd-link {
-      // can't use the normal @include interaction.surface since links are
-      // rendered inline and the `::before`/`::after` pseudo selectors only work
-      // nicely with block-like elements
-      @include utils.keyboard-only {
-        &:focus {
-          @include interaction.focus-styles($disable-background: true);
-        }
-      }
       @include interaction.outline($outline-offset: false);
       @include use-var(color);
 
@@ -96,6 +88,21 @@ $variables: (color, visited-color, hover-color);
         @include set-var(color, get-var(hover-color));
       }
 
+      // can't use the normal @include interaction.surface since links are
+      // rendered inline and the `::before`/`::after` pseudo selectors only work
+      // nicely with block-like elements
+      @if utils.$disable-focus-visible {
+        @include utils.keyboard-only {
+          &:focus {
+            @include interaction.focus-styles($disable-background: true);
+          }
+        }
+      } @else {
+        &:focus-visible {
+          @include interaction.focus-styles($disable-background: true);
+        }
+      }
+
       @if not $disable-flex {
         &--flex {
           @include icon.use-var(gap, spacing);
@@ -120,9 +127,16 @@ $variables: (color, visited-color, hover-color);
 
         &--skip-styled {
           @include utils.map-to-styles($skip-to-main-styles);
-          @include utils.keyboard-only {
-            &:focus,
-            &:active {
+
+          @if utils.$disable-focus-visible {
+            @include utils.keyboard-only {
+              &:focus,
+              &:active {
+                @include utils.map-to-styles($skip-to-main-active-styles);
+              }
+            }
+          } @else {
+            &:focus-visible {
               @include utils.map-to-styles($skip-to-main-active-styles);
             }
           }

package/dist/list/ListItem.d.ts

@@ -9,12 +9,17 @@ declare module "react" {
         "--rmd-list-item-medium-height"?: string | number;
         "--rmd-list-item-large-height"?: string | number;
         "--rmd-list-item-extra-large-height"?: string | number;
-        "--rmd-list-item-three-line-height"?: string | number;
+        "--rmd-list-item-multiline-clamp"?: string | number;
+        "--rmd-list-item-multiline-height"?: string | number;
         "--rmd-list-item-media-size"?: string | number;
         "--rmd-list-item-media-spacing"?: string | number;
-        "--rmd-list-item-text-three-line-height"?: string | number;
+        "--rmd-list-item-text-multiline-height"?: string | number;
     }
 }
+/**
+ * @remarks \@since 6.0.0 Renamed `threeLines` to `multiline` since it can
+ * support more than three lines of text.
+ */
 export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemChildrenProps {
     /**
      * @defaultValue `"button"`
@@ -32,7 +37,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement>, ListItemCh
     /**
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
     /**
      * @defaultValue `false`
      */

package/dist/list/_list.scss

@@ -17,14 +17,15 @@ $disable-item-media-large: false !default;
 $disable-medium-height: false !default;
 $disable-large-height: false !default;
 $disable-extra-large-height: false !default;
-$disable-three-line-height: false !default;
+$disable-multiline-clamp: false !default;
+$disable-multiline-height: true !default;
 $disable-item-link-styles: false !default;
 
 $disable-subheader: false !default;
 $disable-subheader-inset: false !default;
 
 $item-secondary-text-line-height: 1.42857 !default;
-$item-secondary-text-three-line-max-height: 3rem !default;
+$item-secondary-text-multiline-max-height: 3rem !default;
 
 $vertical-padding: 0.5rem !default;
 $dense-vertical-padding: 0.25rem !default;
@@ -51,8 +52,9 @@ $item-large-height: 4rem !default;
 $item-dense-large-height: 3.5rem !default;
 $item-extra-large-height: 4.5rem !default;
 $item-dense-extra-large-height: 4rem !default;
-$item-three-line-height: 5.5rem !default;
-$item-dense-three-line-height: 5rem !default;
+$item-multiline-clamp: 2 !default;
+$item-multiline-height: 5.5rem !default;
+$item-dense-multiline-height: 5rem !default;
 
 $item-media-spacing: 1rem !default;
 $item-media-size: 3.5rem !default;
@@ -70,10 +72,11 @@ $variables: (
   item-medium-height,
   item-large-height,
   item-extra-large-height,
-  item-three-line-height,
+  item-multiline-height,
   item-media-size,
   item-media-spacing,
-  item-text-three-line-height
+  item-text-multiline-height,
+  item-multiline-clamp
 );
 
 @function get-var($name, $fallback: null) {
@@ -111,6 +114,7 @@ $variables: (
     @include set-var(vertical-padding, $vertical-padding);
     @include set-var(item-horizontal-padding, $item-horizontal-padding);
     @include set-var(item-vertical-padding, $item-vertical-padding);
+    @include set-var(item-keyline, $item-keyline);
 
     @include set-var(item-height, $item-height);
     @if not $disable-medium-height {
@@ -122,11 +126,14 @@ $variables: (
     @if not $disable-extra-large-height {
       @include set-var(item-extra-large-height, $item-extra-large-height);
     }
-    @if not $disable-three-line-height {
-      @include set-var(item-three-line-height, $item-three-line-height);
+    @if not $disable-multiline-clamp {
+      @include set-var(item-multiline-clamp, $item-multiline-clamp);
+    }
+    @if not $disable-multiline-height {
+      @include set-var(item-multiline-height, $item-multiline-height);
       @include set-var(
-        item-text-three-line-height,
-        $item-secondary-text-three-line-max-height
+        item-text-multiline-height,
+        $item-secondary-text-multiline-max-height
       );
     }
 
@@ -212,9 +219,9 @@ $variables: (
         }
       }
 
-      @if not $disable-three-line-height {
-        &--three-lines {
-          @include set-var(item-height, get-var(item-three-line-height));
+      @if not $disable-multiline-height {
+        &--multiline {
+          @include set-var(item-height, get-var(item-multiline-height));
         }
       }
 
@@ -231,12 +238,16 @@ $variables: (
           @include theme.theme-use-var(color, text-secondary-color);
         }
 
-        &--clamped {
-          @include typography.line-clamp;
-          @include use-var(max-height, item-text-three-line-height);
+        @if not $disable-multiline-clamp {
+          &--clamped {
+            @include typography.line-clamp(get-var(item-multiline-clamp));
+            @if not $disable-multiline-height {
+              @include use-var(max-height, item-text-multiline-height);
+            }
 
-          line-height: $item-secondary-text-line-height;
-          white-space: normal;
+            line-height: $item-secondary-text-line-height;
+            white-space: normal;
+          }
         }
       }
 

package/dist/list/getListItemHeight.d.ts

@@ -6,7 +6,6 @@ import type { ListItemChildrenProps, ListItemHeight } from "./types.js";
 export interface ListItemHeightOptions extends Pick<ListItemChildrenProps, "leftAddon" | "rightAddon" | "leftAddonType" | "rightAddonType" | "secondaryText"> {
     /**
      * @see {@link ListItemHeight}
-     * @defaultValue `"auto"`
      */
     height?: ListItemHeight;
 }

package/dist/list/listItemStyles.d.ts

@@ -10,7 +10,7 @@ export interface ListItemClassNameOptions {
     /**
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
     /**
      * @defaultValue `false`
      */
@@ -98,6 +98,14 @@ export interface ListItemAddonClassNameOptions {
      * @remarks \@since 6.0.0
      */
     disableCenteredMedia?: boolean;
+    /**
+     * Set this to `true` to disable the additional spacing applied to the addons
+     * that appear before the `children` and the normal `--rmd-text-icon-spacing`
+     * value is used instead.
+     *
+     * @defaultValue `false`
+     */
+    disableBeforeSpacing?: boolean;
 }
 /**
  *

package/dist/list/types.d.ts

@@ -1,11 +1,11 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import type { PropsWithRef } from "../types.js";
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PropsWithRef } from "../types.js";
 /**
  * The height to apply to the list item.
  *
  * Conversions:
  *
- * - height !== "auto" -> height
+ * - height !== undefined && height !== "auto" -> height
  * - secondaryText or left/right addon is media/media-large  -> "extra-large"
  * - left/right addon is avatar -> "large"
  * - left/right addon is icon -> "medium"
@@ -48,6 +48,14 @@ export interface ListItemChildrenAddonProps {
      * @remarks \@since 6.0.0
      */
     leftAddonForceWrap?: boolean;
+    /**
+     * Set this to `true` to disable the additional spacing applied to the addons
+     * that appear before the `children` and the normal `--rmd-text-icon-spacing`
+     * value is used instead.
+     *
+     * @defaultValue `false`
+     */
+    disableLeftAddonSpacing?: boolean;
     /**
      * An optional addon to display to the right of the `primaryText` or
      * `children` and should be used with the `rightAddonType` prop to adjust
@@ -165,10 +173,12 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
     secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     /**
      * Set this to `true` to allow the {@link secondaryText} to span multiple
-     * lines and use the CSS clamp after two lines of text are visible.
+     * lines and use the CSS clamp after two lines of text are visible. The number
+     * of lines can be configured by `core.$list-item-multiline-clamp` or
+     * `@include core.list-set-var(item-multiline-clamp, $new-value)`.
      *
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
 }

package/dist/menu/Menu.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type HTMLAttributes } from "react";
-import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.jsx";
+import { type FloatingActionButtonPosition } from "../button/FloatingActionButton.js";
 import { type ListElement, type ListProps } from "../list/List.js";
 import { type GetDefaultFocusedIndex } from "../movement/types.js";
 import { type CalculateFixedPositionOptions } from "../positioning/types.js";

package/dist/menu/_menu.scss

@@ -8,7 +8,6 @@
 $disable-everything: false !default;
 $disable-menu-item: false !default;
 $disable-menu-item-group: false !default;
-$disable-focus-outline: false !default;
 $disable-elevation-colors: theme.$disable-dark-elevation !default;
 
 $elevation: 8 !default;
@@ -46,19 +45,6 @@ $variables: (background-color, color, min-width, spacing);
     outline: none;
     overflow: auto;
 
-    @if not $disable-focus-outline {
-      @include utils.keyboard-only {
-        &--outline:focus {
-          // Note: Do not use the `interaction-outline` mixin +
-          // `interaction.set-var(interaction.$focus-color)` like normal focus
-          // elements since it'll make all focusable children update with the
-          // outline color as well
-          outline: interaction.get-var(focus-color) solid
-            interaction.get-var(focus-width);
-        }
-      }
-    }
-
     &--elevated {
       @include box-shadows.box-shadow(
         $elevation,
@@ -79,9 +65,10 @@ $variables: (background-color, color, min-width, spacing);
   .rmd-menu-item {
     @include icon.set-var(spacing, get-var(spacing));
 
-    height: var(--rmd-list-item-height);
-
     &--focused {
+      // can't use `:focus-visible` here since this is mostly for virtual
+      // keyboard movement for comboboxes. the focus is on the button or textbox
+      // instead of a parent element
       @include utils.keyboard-only {
         @include interaction.set-var(
           background-color,

package/dist/portal/PortalContainerProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type RefObject } from "react";
 /**
  * @internal
  * @remarks \@since 6.0.0
@@ -17,7 +17,7 @@ export interface PortalContainerProviderProps {
      * `<div id="rmd-portal-container"></div>` will be added as the last child to
      * the `document.body` and be used as the container element.
      */
-    container?: PortalContainer;
+    container?: PortalContainer | RefObject<PortalContainer>;
     children: ReactNode;
 }
 /**

package/dist/sheet/styles.d.ts

@@ -6,28 +6,27 @@ export type SheetPosition = "top" | "right" | "bottom" | "left";
  * The size to use for sheets that have been positioned left or right. The
  * default supported values are:
  *
- * - none - the size is based on content, but is still limited to the viewport
- *   width so that the horizontal scrolling will not occur within the page. No
- *   limits added to sizing.
- * - touch - the `min-width` is set to be the entire viewport width minus a
- *   touchable area and `max-width` is set to `20rem` and is normally
- *   recommended for mobile devices.
- * - static - the width is set to a static `16rem` and generally used for
+ * - `"none"` - the size is based on content, but is still limited to the
+ *   viewport width so that the horizontal scrolling will not occur within the
+ *   page. No limits added to sizing.
+ * - `"touch"` - the `width` is set to be the entire viewport width minus a
+ *   touchable area and is normally recommended for mobile devices.
+ * - `"static"` - the `width` is set to a static `16rem` and generally used for
  *   landscape tablets and desktops.
- * - media - automatically switches between "touch" and "static" based on css
- *   media queries. (this is the default)
+ * - `"media"` - automatically switches between "touch" and "static" based on
+ *   css media queries. (this is the default)
  */
 export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
 /**
  * The size to use for sheets that have been positioned top or bottom. The
  * supported sizes are:
  *
- * - none - the size is based on content and is limited to the viewport
- *   height.
- * - touch - the size is based on content and is limited to the viewport
- *   height with a touchable area to close the sheet.
- * - recommended - the material design recommended sizing that forces a
- *   max-height of 50vh and min-height of 3.5rem
+ * - `"none"` - the size is based on content and is limited to the viewport
+ *   height
+ * - `"touch"` - the size is based on content and is limited to the viewport
+ *   height minus a small touchable area
+ * - `"recommended"` - the material design recommended sizing that forces a
+ *   `max-height` of 50vh and `min-height` of 3.5rem
  */
 export type SheetVerticalSize = "none" | "touch" | "recommended";
 /** @remarks \@since 6.0.0 */

package/dist/src/CoreProviders.js.map

@@ -0,0 +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"],"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/src/NoSsr.js.map

@@ -0,0 +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"],"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"}

package/dist/src/SsrProvider.js.map

@@ -0,0 +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"],"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"}