@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/responsive-item/ResponsiveItem.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { responsiveItem } from "./responsiveItemStyles.js";
+/**
+ * @example Image Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Iframe Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <iframe
+ *         src="https://youtube.com/some-video-url"
+ *         title="Some YouTube video"
+ *         allowFullScreen
+ *       />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Forced Aspect Ratio
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem aspectRatio="16-9">
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0 Renamed from `MediaContainer` to
+ * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
+ */ export const ResponsiveItem = /*#__PURE__*/ forwardRef(function ResponsiveItem(props, ref) {
+    const { className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("span", {
+        ...remaining,
+        ref: ref,
+        className: responsiveItem({
+            className,
+            fullWidth,
+            aspectRatio,
+            responsive
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=ResponsiveItem.js.map

package/dist/responsive-item/ResponsiveItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport {\n  responsiveItem,\n  type ResponsiveItemClassNameOptions,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` props since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <iframe\n *         src=\"https://youtube.com/some-video-url\"\n *         title=\"Some YouTube video\"\n *         allowFullScreen\n *       />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem aspectRatio=\"16-9\">\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(\n  function ResponsiveItem(props, ref) {\n    const {\n      className,\n      fullWidth = false,\n      aspectRatio,\n      responsive = \"auto\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        className={responsiveItem({\n          className,\n          fullWidth,\n          aspectRatio,\n          responsive,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SACEC,cAAc,QAET,4BAA4B;AAenC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}

package/dist/responsive-item/ResponsiveItemOverlay.d.ts

@@ -1,23 +1,5 @@
 import { type HTMLAttributes } from "react";
-/**
- * The overlay positions relative to the `MediaContainer` component.  Most of
- * the sizes are self-explanatory, but the `middle` position will be centered
- * vertically while `center` will be centered `horizontally`.
- *
- * @since 6.0.0 Renamed from `MediaOverlayPosition` to
- * `ResponsiveItemOverlayProps`.
- */
-export type ResponsiveItemOverlayPosition = "top" | "right" | "bottom" | "left" | "middle" | "center" | "absolute-center";
-/** @since 6.0.0 */
-export interface ResponsiveItemOverlayClassNameOptions {
-    className?: string;
-    /** @defaultValue `"bottom"` */
-    position?: ResponsiveItemOverlayPosition;
-}
-/**
- * @since 6.0.0
- */
-export declare function responsiveItemOverlay(options?: ResponsiveItemOverlayClassNameOptions): string;
+import { type ResponsiveItemOverlayClassNameOptions } from "./responsiveItemOverlayStyles.js";
 /**
  * @since 6.0.0 Renamed from `MediaOverlayProps` to
  * `ResponsiveItemOverlayProps`.

package/dist/responsive-item/ResponsiveItemOverlay.js

@@ -1,17 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-responsive-item-overlay");
-/**
- * @since 6.0.0
- */ export function responsiveItemOverlay(options = {}) {
-    const { className, position = "bottom" } = options;
-    return cnb(styles({
-        [position]: true,
-        horizontal: position !== "top" && position !== "bottom" && position !== "middle"
-    }), className);
-}
+import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
 /**
  * @example Simple Example
  * ```tsx

package/dist/responsive-item/ResponsiveItemOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-responsive-item-overlay\");\n\n/**\n * The overlay positions relative to the `MediaContainer` component.  Most of\n * the sizes are self-explanatory, but the `middle` position will be centered\n * vertically while `center` will be centered `horizontally`.\n *\n * @since 6.0.0 Renamed from `MediaOverlayPosition` to\n * `ResponsiveItemOverlayProps`.\n */\nexport type ResponsiveItemOverlayPosition =\n  | \"top\"\n  | \"right\"\n  | \"bottom\"\n  | \"left\"\n  | \"middle\"\n  | \"center\"\n  | \"absolute-center\";\n\n/** @since 6.0.0 */\nexport interface ResponsiveItemOverlayClassNameOptions {\n  className?: string;\n  /** @defaultValue `\"bottom\"` */\n  position?: ResponsiveItemOverlayPosition;\n}\n\n/**\n * @since 6.0.0\n */\nexport function responsiveItemOverlay(\n  options: ResponsiveItemOverlayClassNameOptions = {}\n): string {\n  const { className, position = \"bottom\" } = options;\n\n  return cnb(\n    styles({\n      [position]: true,\n      horizontal:\n        position !== \"top\" && position !== \"bottom\" && position !== \"middle\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { ResponsiveItemContainer, ResponsiveItemOverlay } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItemContainer>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *       <ResponsiveItemOverlay>\n *         <Typography type=\"headline-5\" margin=\"none\">\n *           This appears at the bottom by default.\n *         </Typography>\n *       </ResponsiveItemOverlay>\n *     </ResponsiveItemContainer>\n *   );\n * }\n * ```\n *\n * @see {@link ResponsiveItemOverlayPosition}\n *\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n  HTMLSpanElement,\n  ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n  const { className, children, position = \"bottom\", ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItemOverlay({ className, position })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","responsiveItemOverlay","options","className","position","horizontal","ResponsiveItemOverlay","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,sBACdC,UAAiD,CAAC,CAAC;IAEnD,MAAM,EAAEC,SAAS,EAAEC,WAAW,QAAQ,EAAE,GAAGF;IAE3C,OAAOL,IACLG,OAAO;QACL,CAACI,SAAS,EAAE;QACZC,YACED,aAAa,SAASA,aAAa,YAAYA,aAAa;IAChE,IACAD;AAEJ;AAUA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,MAAMG,sCAAwBR,WAGnC,SAASQ,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEL,SAAS,EAAEM,QAAQ,EAAEL,WAAW,QAAQ,EAAE,GAAGM,WAAW,GAAGH;IAEnE,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLL,WAAWF,sBAAsB;YAAEE;YAAWC;QAAS;kBAEtDK;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport {\n  responsiveItemOverlay,\n  type ResponsiveItemOverlayClassNameOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type ResponsiveItemOverlayPosition,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { ResponsiveItemContainer, ResponsiveItemOverlay } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItemContainer>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *       <ResponsiveItemOverlay>\n *         <Typography type=\"headline-5\" margin=\"none\">\n *           This appears at the bottom by default.\n *         </Typography>\n *       </ResponsiveItemOverlay>\n *     </ResponsiveItemContainer>\n *   );\n * }\n * ```\n *\n * @see {@link ResponsiveItemOverlayPosition}\n *\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n  HTMLSpanElement,\n  ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n  const { className, children, position = \"bottom\", ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItemOverlay({ className, position })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SACEC,qBAAqB,QAIhB,mCAAmC;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,MAAMC,sCAAwBF,WAGnC,SAASE,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEnE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP,GAAG"}

package/dist/responsive-item/_responsive-item.scss

@@ -2,13 +2,11 @@
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
+@use "../theme/colors";
 @use "../theme/theme";
 
 $disable-everything: false !default;
-$disable-item: false !default;
-$disable-scale-to-container: false !default;
 $disable-auto: false !default;
-$disable-auto-scale: false !default;
 $disable-full-width: false !default;
 $disable-overlay: false !default;
 $disable-overlay-top: false !default;
@@ -19,13 +17,12 @@ $disable-overlay-middle: false !default;
 $disable-overlay-center: false !default;
 $disable-overlay-absolute-center: false !default;
 
-$background-color: rgba(#000, 0.54) !default;
-$color: theme.$dark-theme-text-primary-color !default;
-$z-index: 1 !default;
-
-$overlay-padding: 1rem !default;
 $selectors: (img ">svg" iframe video embed object) !default;
 
+$overlay-background-color: rgba(colors.$black, 0.54) !default;
+$overlay-color: theme.$dark-theme-text-primary-color !default;
+$overlay-z-index: 0 !default;
+$overlay-padding: 1rem !default;
 $overlay-horizontal-width: 30% !default;
 
 $aspect-ratios: (
@@ -43,156 +40,136 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   width: 100%;
 }
 
-@mixin responsive-item {
-  height: auto;
-  width: 100%;
-}
-
-@mixin scale-to-container {
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-}
-
 @mixin aspect-ratio($width, $height) {
   padding-bottom: math.percentage(math.div($height, $width));
 }
 
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(responsive-item, $disable-layer) {
-      @if not $disable-item {
-        .rmd-responsive-item {
-          @include responsive-item;
-
-          @if not $disable-scale-to-container {
-            &--scale {
-              @include scale-to-container;
-            }
-          }
+@mixin base-styles {
+  .rmd-responsive-item {
+    display: inline-block;
+    position: relative;
 
-          @if not $disable-aspect-ratios {
-            &--aspect-ratio {
-              @include forced-aspect-ratio;
-            }
+    @if not $disable-auto {
+      &--auto {
+        @each $selector in $selectors {
+          #{$selector} {
+            height: auto;
+            width: 100%;
           }
         }
       }
+    }
 
-      .rmd-responsive-item-container {
-        display: inline-block;
-        position: relative;
-
-        @if not $disable-auto {
-          &--auto {
-            @each $selector in $selectors {
-              #{$selector} {
-                @include responsive-item;
-              }
-            }
-          }
+    @if not $disable-full-width {
+      &--full-width {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    @if not $disable-aspect-ratios {
+      &--aspect-ratio {
+        display: block;
+        height: 0;
+        overflow: hidden;
+        padding: 0;
 
-          @if not $disable-auto-scale {
-            &--auto-scale {
-              @each $selector in $selectors {
-                #{$selector} {
-                  @include scale-to-container;
-                }
-              }
-            }
+        @each $selector in $selectors {
+          #{$selector} {
+            @include forced-aspect-ratio;
           }
         }
+      }
 
-        @if not $disable-full-width {
-          &--full-width {
-            display: block;
-            width: 100%;
-          }
+      @each $suffix, $ratio-list in $aspect-ratios {
+        &--#{$suffix} {
+          @include aspect-ratio(
+            list.nth($ratio-list, 1),
+            list.nth($ratio-list, 2)
+          );
         }
+      }
+    }
+  }
+}
 
-        @if not $disable-aspect-ratios {
-          &--aspect-ratio {
-            display: block;
-            height: 0;
-            overflow: hidden;
-            padding: 0;
-
-            @each $selector in $selectors {
-              #{$selector} {
-                @include forced-aspect-ratio;
-              }
-            }
-          }
+@mixin overlay-styles {
+  .rmd-responsive-item-overlay {
+    background-color: $overlay-background-color;
+    color: $overlay-color;
+    padding: $overlay-padding;
+    position: absolute;
+    z-index: $overlay-z-index;
+
+    @if not $disable-overlay-top {
+      &--top {
+        inset: 0 0 auto;
+      }
+    }
 
-          @each $suffix, $ratio-list in $aspect-ratios {
-            &--#{$suffix} {
-              @include aspect-ratio(
-                list.nth($ratio-list, 1),
-                list.nth($ratio-list, 2)
-              );
-            }
-          }
-        }
+    @if not $disable-overlay-bottom {
+      &--bottom {
+        inset: auto 0 0;
       }
+    }
 
-      @if not $disable-overlay {
-        .rmd-responsive-item-overlay {
-          background-color: $background-color;
-          color: $color;
-          padding: $overlay-padding;
-          position: absolute;
-          z-index: 0;
-
-          @if not $disable-overlay-top {
-            &--top {
-              inset: 0 0 auto;
-            }
-          }
+    &--horizontal {
+      inset: 0 auto;
+      width: $overlay-horizontal-width;
+    }
 
-          @if not $disable-overlay-bottom {
-            &--bottom {
-              inset: auto 0 0;
-            }
-          }
+    @if not $disable-overlay-left {
+      &--left {
+        left: 0;
 
-          &--horizontal {
-            inset: 0 auto;
-            width: $overlay-horizontal-width;
-          }
+        @include utils.rtl {
+          left: auto;
+          right: 0;
+        }
+      }
+    }
 
-          @if not $disable-overlay-left {
-            &--left {
-              @include utils.auto-rtl(left, 0);
-            }
-          }
+    @if not $disable-overlay-right {
+      &--right {
+        right: 0;
 
-          @if not $disable-overlay-right {
-            &--right {
-              @include utils.auto-rtl(right, 0);
-            }
-          }
+        @include utils.rtl {
+          left: 0;
+          right: auto;
+        }
+      }
+    }
 
-          @if not $disable-overlay-middle {
-            &--middle {
-              inset: auto 0 50%;
-              transform: translate3d(0, 50%, 0);
-            }
-          }
+    @if not $disable-overlay-middle {
+      &--middle {
+        inset: auto 0 50%;
+        transform: translate3d(0, 50%, 0);
+      }
+    }
 
-          @if not $disable-overlay-center {
-            &--center {
-              inset: 0 50% 0 auto;
-              transform: translate3d(50%, 0, 0);
-            }
-          }
+    @if not $disable-overlay-center {
+      &--center {
+        inset: 0 50% 0 auto;
+        transform: translate3d(50%, 0, 0);
+      }
+    }
 
-          @if not $disable-overlay-absolute-center {
-            &--absolute-center {
-              inset: auto 50% 50% auto;
-              transform: translate3d(50%, 50%, 0);
-            }
-          }
-        }
+    @if not $disable-overlay-absolute-center {
+      &--absolute-center {
+        inset: auto 50% 50% auto;
+        transform: translate3d(50%, 50%, 0);
+      }
+    }
+  }
+}
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(responsive-item, $disable-layer) {
+      @include base-styles;
+
+      @if not $disable-overlay {
+        @include overlay-styles;
       }
     }
   }

package/dist/responsive-item/responsiveItemOverlayStyles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The overlay positions relative to the `MediaContainer` component.  Most of
+ * the sizes are self-explanatory, but the `middle` position will be centered
+ * vertically while `center` will be centered `horizontally`.
+ *
+ * @since 6.0.0 Renamed from `MediaOverlayPosition` to
+ * `ResponsiveItemOverlayProps`.
+ */
+export type ResponsiveItemOverlayPosition = "top" | "right" | "bottom" | "left" | "middle" | "center" | "absolute-center";
+/** @since 6.0.0 */
+export interface ResponsiveItemOverlayClassNameOptions {
+    className?: string;
+    /** @defaultValue `"bottom"` */
+    position?: ResponsiveItemOverlayPosition;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function responsiveItemOverlay(options?: ResponsiveItemOverlayClassNameOptions): string;

package/dist/responsive-item/responsiveItemOverlayStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-responsive-item-overlay");
+/**
+ * @since 6.0.0
+ */ export function responsiveItemOverlay(options = {}) {
+    const { className, position = "bottom" } = options;
+    return cnb(styles({
+        [position]: true,
+        horizontal: position !== "top" && position !== "bottom" && position !== "middle"
+    }), className);
+}
+
+//# sourceMappingURL=responsiveItemOverlayStyles.js.map

package/dist/responsive-item/responsiveItemOverlayStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive-item/responsiveItemOverlayStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-responsive-item-overlay\");\n\n/**\n * The overlay positions relative to the `MediaContainer` component.  Most of\n * the sizes are self-explanatory, but the `middle` position will be centered\n * vertically while `center` will be centered `horizontally`.\n *\n * @since 6.0.0 Renamed from `MediaOverlayPosition` to\n * `ResponsiveItemOverlayProps`.\n */\nexport type ResponsiveItemOverlayPosition =\n  | \"top\"\n  | \"right\"\n  | \"bottom\"\n  | \"left\"\n  | \"middle\"\n  | \"center\"\n  | \"absolute-center\";\n\n/** @since 6.0.0 */\nexport interface ResponsiveItemOverlayClassNameOptions {\n  className?: string;\n  /** @defaultValue `\"bottom\"` */\n  position?: ResponsiveItemOverlayPosition;\n}\n\n/**\n * @since 6.0.0\n */\nexport function responsiveItemOverlay(\n  options: ResponsiveItemOverlayClassNameOptions = {}\n): string {\n  const { className, position = \"bottom\" } = options;\n\n  return cnb(\n    styles({\n      [position]: true,\n      horizontal:\n        position !== \"top\" && position !== \"bottom\" && position !== \"middle\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","responsiveItemOverlay","options","className","position","horizontal"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,sBACdC,UAAiD,CAAC,CAAC;IAEnD,MAAM,EAAEC,SAAS,EAAEC,WAAW,QAAQ,EAAE,GAAGF;IAE3C,OAAOJ,IACLE,OAAO;QACL,CAACI,SAAS,EAAE;QACZC,YACED,aAAa,SAASA,aAAa,YAAYA,aAAa;IAChE,IACAD;AAEJ"}

package/dist/responsive-item/responsiveItemStyles.d.ts

@@ -0,0 +1,52 @@
+/** @since 6.0.0 */
+export interface ResponsiveItemClassNameOptions {
+    className?: string;
+    /**
+     * Set this to `true` if the container should gain the following styles:
+     *
+     * ```scss
+     * display: block;
+     * width: 100%;
+     * ```
+     *
+     * @defaultValue `false`
+     */
+    fullWidth?: boolean;
+    /**
+     * Set this to a custom aspect ratio to use.
+     *
+     * @example Valid Aspect Ratios
+     * ```tsx
+     * aspectRatio="16-9"
+     * aspectRatio="9-16"
+     * aspectRatio="3-4"
+     * aspectRatio="4-3"
+     * aspectRatio="1-1"
+     * ```
+     *
+     * These values are based on the `core.$responsive-item-aspect-ratios` map.
+     *
+     * @defaultValue `""`
+     */
+    aspectRatio?: `${number}-${number}`;
+    /**
+     * Set this to `"manual"` if you want to manually specify which elements are
+     * responsive items using custom class names. You probably don't really want
+     * to use this.
+     *
+     * Set this to `"auto"` to automatically update all visual media that appear
+     * as a child in this component to a responsive item.
+     *
+     * Set this to `"container"` to automatically update all visual media that
+     * appear as a child in this component to be a responsive item that scales to
+     * the container's dimensions.
+     *
+     * Note: The `"auto"` and `"container"` values use the
+     * `core.$responsive-item-selectors` value for their behavior.
+     *
+     * @defaultValue `"auto"`
+     */
+    responsive?: "auto" | "manual" | "container";
+}
+/** @since 6.0.0 */
+export declare function responsiveItem(options?: ResponsiveItemClassNameOptions): string;

package/dist/responsive-item/responsiveItemStyles.js

@@ -0,0 +1,15 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-responsive-item");
+/** @since 6.0.0 */ export function responsiveItem(options = {}) {
+    const { className, fullWidth = false, aspectRatio = "", responsive = "auto" } = options;
+    return cnb(styles({
+        auto: responsive !== "manual",
+        "auto-scale": responsive === "container",
+        "aspect-ratio": aspectRatio,
+        [aspectRatio]: aspectRatio,
+        "full-width": fullWidth
+    }), className);
+}
+
+//# sourceMappingURL=responsiveItemStyles.js.map

package/dist/responsive-item/responsiveItemStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/responsive-item/responsiveItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-responsive-item\");\n\n/** @since 6.0.0 */\nexport interface ResponsiveItemClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the container should gain the following styles:\n   *\n   * ```scss\n   * display: block;\n   * width: 100%;\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to a custom aspect ratio to use.\n   *\n   * @example Valid Aspect Ratios\n   * ```tsx\n   * aspectRatio=\"16-9\"\n   * aspectRatio=\"9-16\"\n   * aspectRatio=\"3-4\"\n   * aspectRatio=\"4-3\"\n   * aspectRatio=\"1-1\"\n   * ```\n   *\n   * These values are based on the `core.$responsive-item-aspect-ratios` map.\n   *\n   * @defaultValue `\"\"`\n   */\n  aspectRatio?: `${number}-${number}`;\n\n  /**\n   * Set this to `\"manual\"` if you want to manually specify which elements are\n   * responsive items using custom class names. You probably don't really want\n   * to use this.\n   *\n   * Set this to `\"auto\"` to automatically update all visual media that appear\n   * as a child in this component to a responsive item.\n   *\n   * Set this to `\"container\"` to automatically update all visual media that\n   * appear as a child in this component to be a responsive item that scales to\n   * the container's dimensions.\n   *\n   * Note: The `\"auto\"` and `\"container\"` values use the\n   * `core.$responsive-item-selectors` value for their behavior.\n   *\n   * @defaultValue `\"auto\"`\n   */\n  responsive?: \"auto\" | \"manual\" | \"container\";\n}\n\n/** @since 6.0.0 */\nexport function responsiveItem(\n  options: ResponsiveItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    fullWidth = false,\n    aspectRatio = \"\",\n    responsive = \"auto\",\n  } = options;\n\n  return cnb(\n    styles({\n      auto: responsive !== \"manual\",\n      \"auto-scale\": responsive === \"container\",\n      \"aspect-ratio\": aspectRatio,\n      [aspectRatio]: aspectRatio,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","responsiveItem","options","className","fullWidth","aspectRatio","responsive","auto"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwDnB,iBAAiB,GACjB,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,cAAc,EAAE,EAChBC,aAAa,MAAM,EACpB,GAAGJ;IAEJ,OAAOJ,IACLE,OAAO;QACLO,MAAMD,eAAe;QACrB,cAAcA,eAAe;QAC7B,gBAAgBD;QAChB,CAACA,YAAY,EAAEA;QACf,cAAcD;IAChB,IACAD;AAEJ"}

package/dist/scroll/useScrollLock.d.ts

@@ -1,3 +1,8 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-scrollbar-size"?: string;
+    }
+}
 export declare const SCROLLBAR_SIZE_VAR = "--rmd-scrollbar-size";
 /**
  *

package/dist/scroll/useScrollLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n *\n * @internal\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,iBAAiB,QAAQ,yBAAyB;AAE3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,CAAC,EAAEL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}
+{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-scrollbar-size\"?: string;\n  }\n}\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n *\n * @internal\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,iBAAiB,QAAQ,yBAAyB;AAQ3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,GAAGL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}

package/dist/searching/utils.d.ts

@@ -4,14 +4,14 @@ import { type BaseSearchOptions } from "./types.js";
  * @since 6.0.0
  * @internal
  */
-export declare const defaultExtractor: <T>(name: string) => (item: T) => string;
+export declare const defaultExtractor: (name: string) => (item: unknown) => string;
 /**
  * @internal
  * @since 6.0.0
  */
 export interface SearchOptions<T> extends BaseSearchOptions<T> {
     type: "search" | "filter";
-    filter(query: string, value: string): boolean;
+    filter: (query: string, value: string) => boolean;
     extractor: TextExtractor<T>;
 }
 /**

package/dist/searching/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n  <T>(name: string) =>\n  (item: T): string => {\n    if (typeof item === \"string\") {\n      return item;\n    }\n\n    throw new Error(\n      `A \\`TextExtractor\\` must be provided to \\`${name}\\` for lists that do not contain strings`\n    );\n  };\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n  type: \"search\" | \"filter\";\n  filter(query: string, value: string): boolean;\n  extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function search<T>(\n  options: SearchOptions<T>\n): readonly T[] | T | undefined {\n  const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n  const fallback = type === \"search\" ? undefined : list;\n  if (!list.length) {\n    return fallback;\n  }\n\n  const q = toSearchQuery(query, whitespace);\n  if (!q) {\n    return fallback;\n  }\n\n  const fn = type === \"search\" ? \"find\" : \"filter\";\n  return list[fn]((item) =>\n    filter(q, toSearchQuery(extractor(item), whitespace))\n  );\n}\n"],"names":["toSearchQuery","defaultExtractor","name","item","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;CAGC,GACD,OAAO,MAAMC,mBACX,CAAIC,OACJ,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,MAAM,IAAIC,MACR,CAAC,0CAA0C,EAAEF,KAAK,wCAAwC,CAAC;IAE/F,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASG,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAIhB,cAAcS,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IACxC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAACd,OACfO,OAAOM,GAAGhB,cAAcW,UAAUR,OAAOS;AAE7C"}
+{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n  (name: string) =>\n  (item: unknown): string => {\n    if (typeof item === \"string\") {\n      return item;\n    }\n\n    throw new Error(\n      `A \\`TextExtractor\\` must be provided to \\`${name}\\` for lists that do not contain strings`\n    );\n  };\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n  type: \"search\" | \"filter\";\n  filter: (query: string, value: string) => boolean;\n  extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function search<T>(\n  options: SearchOptions<T>\n): readonly T[] | T | undefined {\n  const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n  const fallback = type === \"search\" ? undefined : list;\n  if (!list.length) {\n    return fallback;\n  }\n\n  const q = toSearchQuery(query, whitespace);\n  if (!q) {\n    return fallback;\n  }\n\n  const fn = type === \"search\" ? \"find\" : \"filter\";\n  return list[fn]((item) =>\n    filter(q, toSearchQuery(extractor(item), whitespace))\n  );\n}\n"],"names":["toSearchQuery","defaultExtractor","name","item","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;CAGC,GACD,OAAO,MAAMC,mBACX,CAACC,OACD,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,MAAM,IAAIC,MACR,CAAC,0CAA0C,EAAEF,KAAK,wCAAwC,CAAC;IAE/F,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASG,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAIhB,cAAcS,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IACxC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAACd,OACfO,OAAOM,GAAGhB,cAAcW,UAAUR,OAAOS;AAE7C"}

package/dist/segmented-button/SegmentedButton.d.ts

@@ -1,8 +1,9 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 /**
  * @since 6.0.0
  */
-export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
     /**
      * Set this to `true` to apply selected styles and an optional
      * {@link selectedIcon}

package/dist/segmented-button/SegmentedButton.js

@@ -48,7 +48,7 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  *
  * @since 6.0.0
  */ export const SegmentedButton = /*#__PURE__*/ forwardRef(function SegmentedButton(props, ref) {
-    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, ...remaining } = props;
+    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, disableRipple, ...remaining } = props;
     const children = useHigherContrastChildren(propChildren);
     const selectedIconNode = getIcon("selected", propSelectedIcon);
     const selectedIcon = useMaxWidthTransition({
@@ -58,6 +58,7 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
         disableTransition: disableSelectedTransition
     });
     const { pressedClassName, handlers, ripples } = useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         onBlur,
         onClick,
         onKeyDown,