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

package/dist/progress/_progress.scss

@@ -1,3 +1,7 @@
+////
+/// @group progress
+////
+
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
@@ -5,35 +9,111 @@
 @use "../theme/theme";
 @use "../transition/transition";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the `LinearProgress` styles.
+/// @type Boolean
 $disable-linear: $disable-everything !default;
+
+/// Set to `true` to disable the `LinearProgress` vertical styles.
+/// @type Boolean
 $disable-linear-vertical: false !default;
+
+/// Set to `true` to disable the `LinearProgress` horizontal styles.
+/// @type Boolean
 $disable-linear-horizontal: false !default;
+
+/// Set to `true` to disable the `LinearProgress` reversed styles.
+/// @type Boolean
 $disable-linear-reverse: false !default;
+
+/// Set to `true` to only disable the `CircularProgress` styles.
+/// @type Boolean
 $disable-circular: $disable-everything !default;
+
+/// Set to `true` to disable the `CircularProgress` centered styles.
+/// @type Boolean
 $disable-circular-centered-styles: false !default;
+
+/// Set this to `true` if the rotate-only animation is not needed for the
+/// `CircularProgress`.
+/// @type Boolean
+$disable-circular-rotate-only: false !default;
+
+/// Set to `true` to disable only the determinate progress styles.
+/// @type Boolean
 $disable-determinate: false !default;
+
+/// Set to `true` to disable only the indeterminate progress styles.
+/// @type Boolean
 $disable-indeterminate: false !default;
 
+/// This is the default prominent color for the `LinearProgress` component
+/// that helps indicate the current progress. This covers the
+/// `$background-color`.
+///
+/// @see $background-color
+/// @type Color
 $color: theme.theme-get-var(primary-color) !default;
+
+/// This is the default background-color/secondary color for the
+/// `LinearProgress` component that is used as the full track color. This is
+/// covered by the `$color`.
+///
+/// @see $color
+/// @type Color
 $background-color: color-mix(in srgb, currentcolor 66%, colors.$white) !default;
-// $background-color: theme.get-swatch(
-//   theme.$primary-color,
-//   300,
-//   false,
-//   rgba(theme.$primary-color, 0.4)
-// ) !default;
 
+/// The default `CircularProgress` size.
+/// @type Number
 $circular-size: 3rem !default;
+
+/// The default dense `CircularProgress` size.
+/// @type Number
 $circular-dense-size: 1.5rem !default;
+
+/// The default svg `stroke-width` for the `CircularProgress`.
+/// @type Number
 $circular-stroke-width: 6 !default;
+
+/// The default svg `stroke-dasharray` for the `CircularProgress`.
+/// @type Number
 $circular-dasharray: 187 !default;
+
+/// The default transition duration for the determinate `CircularProgress` to
+/// animate to new values.
+/// @type Number
 $circular-transition-duration: transition.$enter-duration !default;
+
+/// The default transition duration for the indeterminate `CircularProgress`.
+/// @type Number
 $circular-indeterminate-transition-duration: 2.4s !default;
+
+/// The default transition duration for the indeterminate `CircularProgress`
+/// that only rotates to improve performance.
+/// @type Number
 $circular-rotate-only-transition-duration: 1.2s !default;
+
+/// The default svg `stroke-dashoffset` for the indeterminate
+/// `CircularProgress` that only rotates to improve performance.
+/// @type Number
 $circular-rotate-only-dashoffset: $circular-dasharray * 0.4 !default;
+
+/// The default starting `stroke-dashoffset` for the `CircularProgress`
+/// animation.
+/// @type Number
 $circular-start-offset: $circular-dasharray !default;
+
+/// The default ending `stroke-dashoffset` for the `CircularProgress`
+/// animation.
+/// @type Number
 $circular-end-offset: $circular-dasharray * 0.25 !default;
+
+/// Used to generate the `@keyframes rmd-progress-rotate` for the indeterminate
+/// `CircularProgress`.
+/// @type Map
 $circular-rotate-styles: (
   0%: (
     transform: rotate(0deg),
@@ -48,6 +128,10 @@ $circular-rotate-styles: (
     transform: rotate(720deg),
   ),
 ) !default;
+
+/// Used to generate the `@keyframes rmd-circular-progress-size` for the
+/// indeterminate `CircularProgress`.
+/// @type Map
 $circular-dash-styles: (
   0%: (
     stroke-dashoffset: $circular-start-offset,
@@ -60,9 +144,23 @@ $circular-dash-styles: (
   ),
 ) !default;
 
+/// The default height/width for the `LinearProgress`.
+/// @type Number
 $linear-size: 0.25rem !default;
+
+/// The default transition duration for the `LinearProgress` keyframes
+/// animation.
+/// @type Number
 $linear-transition-duration: 2.4s !default;
+
+/// The default transition duration for the `LinearProgress` keyframes
+/// animation that is a bit quicker.
+/// @type Number
 $linear-short-animation-delay: 0.75s !default;
+
+/// Used to generate the `@keyframes rmd-progress-bar` for the
+/// indeterminate `LinearProgress`.
+/// @type Map
 $linear-styles: (
   0%: (
     left: -35%,
@@ -77,6 +175,10 @@ $linear-styles: (
     right: -90%,
   ),
 ) !default;
+
+/// Used to generate the `@keyframes rmd-progress-bar-short` for the
+/// indeterminate `LinearProgress`.
+/// @type Map
 $linear-short-styles: (
   0%: (
     left: -200%,
@@ -92,9 +194,8 @@ $linear-short-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the transition. Each key in this
-/// map will be set immediately at the root of the `keyframes` and then each
-/// child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-reverse` for the
+/// reversed indeterminate `LinearProgress`.
 /// @type Map
 $linear-reverse-styles: (
   0%: (
@@ -111,9 +212,8 @@ $linear-reverse-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the shorter transition. Each key
-/// in this map will be set immediately at the root of the `keyframes` and then
-/// each child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-reverse-short` for the
+/// reversed indeterminate `LinearProgress` that is a bit quicker.
 /// @type Map
 $linear-reverse-short-styles: (
   0%: (
@@ -130,9 +230,8 @@ $linear-reverse-short-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the vertical transition. Each
-/// key in this map will be set immediately at the root of the `keyframes` and
-/// then each child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-vertical` for the
+/// vertical indeterminate `LinearProgress`.
 /// @type Map
 $linear-vertical-styles: (
   0%: (
@@ -149,9 +248,8 @@ $linear-vertical-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the shorter vertical transition.
-/// Each key in this map will be set immediately at the root of the `keyframes`
-/// and then each child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-vertical-short` for the
+/// vertical indeterminate `LinearProgress` that is a bit quicker.
 /// @type Map
 $linear-vertical-short-styles: (
   0%: (
@@ -168,9 +266,8 @@ $linear-vertical-short-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the vertical transition. Each
-/// key in this map will be set immediately at the root of the `keyframes` and
-/// then each child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-vertical-reversed` for the
+/// vertical reversed indeterminate `LinearProgress`.
 /// @type Map
 $linear-vertical-reverse-styles: (
   0%: (
@@ -187,9 +284,9 @@ $linear-vertical-reverse-styles: (
   ),
 ) !default;
 
-/// The linear progress bar styles to apply for the shorter vertical transition.
-/// Each key in this map will be set immediately at the root of the `keyframes`
-/// and then each child map will be considered a map of property: value.
+/// Used to generate the `@keyframes rmd-progress-bar-vertical-reversed-short`
+/// for the vertical reversed indeterminate `LinearProgress` that is a bit
+/// quicker.
 /// @type Map
 $linear-vertical-reverse-short-styles: (
   0%: (
@@ -206,6 +303,9 @@ $linear-vertical-reverse-short-styles: (
   ),
 ) !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   background-color,
   color,
@@ -214,6 +314,9 @@ $variables: (
   linear-size
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "progress");
   @if $fallback {
@@ -223,16 +326,25 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "progress")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// @param {Map} styles - The styles map to convert to keyframes
+/// @access private
 @mixin _animation($styles) {
   @if $styles {
     @each $percentage, $style in $styles {
@@ -243,6 +355,7 @@ $variables: (
   }
 }
 
+/// @access private
 @mixin _circular-progress {
   .rmd-circular-progress {
     @include use-var(height, circular-size);
@@ -286,11 +399,13 @@ $variables: (
             infinite;
         }
 
-        &--rotate-only {
-          animation: rmd-progress-rotate-only
-            $circular-rotate-only-transition-duration
-            linear
-            infinite;
+        @if not $disable-circular-rotate-only {
+          &--rotate-only {
+            animation: rmd-progress-rotate-only
+              $circular-rotate-only-transition-duration
+              linear
+              infinite;
+          }
         }
       }
     }
@@ -319,20 +434,24 @@ $variables: (
             infinite;
         }
 
-        &--rotate-only {
-          animation: none;
-          stroke-dashoffset: $circular-rotate-only-dashoffset;
+        @if not $disable-circular-rotate-only {
+          &--rotate-only {
+            animation: none;
+            stroke-dashoffset: $circular-rotate-only-dashoffset;
+          }
         }
       }
     }
   }
 
-  @keyframes rmd-progress-rotate-only {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
+  @if not $disable-circular-rotate-only {
+    @keyframes rmd-progress-rotate-only {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
     }
   }
 
@@ -347,6 +466,7 @@ $variables: (
   }
 }
 
+/// @access private
 @mixin _linear-progress-bar {
   @if not $disable-linear-horizontal {
     &--horizontal {
@@ -485,6 +605,7 @@ $variables: (
   }
 }
 
+/// @access private
 @mixin _linear-progress {
   .rmd-linear-progress {
     @include use-var(background-color);
@@ -555,6 +676,7 @@ $variables: (
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-circular {
     @include set-var(circular-size, $circular-size);
@@ -568,6 +690,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @include utils.optional-layer(
     progress,

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

@@ -14,7 +14,7 @@ export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, Re
 /**
  * @example Image Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -28,7 +28,7 @@ export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, Re
  *
  * @example Iframe Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -46,7 +46,7 @@ export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, Re
  *
  * @example Forced Aspect Ratio
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -58,6 +58,7 @@ export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, Re
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @since 6.0.0 Renamed from `MediaContainer` to
  * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
  */

package/dist/responsive-item/ResponsiveItem.js

@@ -4,7 +4,7 @@ import { responsiveItem } from "./responsiveItemStyles.js";
 /**
  * @example Image Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -18,7 +18,7 @@ import { responsiveItem } from "./responsiveItemStyles.js";
  *
  * @example Iframe Example
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -36,7 +36,7 @@ import { responsiveItem } from "./responsiveItemStyles.js";
  *
  * @example Forced Aspect Ratio
  * ```tsx
- * import { ResponsiveItem } from "@react-md/core";
+ * import { ResponsiveItem } from "@react-md/core/responsive-item/ResponsiveItem";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -48,6 +48,7 @@ import { responsiveItem } from "./responsiveItemStyles.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @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) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemClassNameOptions,\n  responsiveItem,\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,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,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"}
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemClassNameOptions,\n  responsiveItem,\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/responsive-item/ResponsiveItem\";\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/responsive-item/ResponsiveItem\";\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/responsive-item/ResponsiveItem\";\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 * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}\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,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,4BAA4B;AAenC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,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

@@ -9,25 +9,27 @@ export interface ResponsiveItemOverlayProps extends HTMLAttributes<HTMLSpanEleme
 /**
  * @example Simple Example
  * ```tsx
- * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent";
+ * import { ResponsiveItemOverlay } from "@react-md/core/responsive-item/ResponsiveItemOverlay";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return (
- *     <ResponsiveItemContainer>
+ *     <CardContent>
  *       <img alt="" src="/some-image.png" />
  *       <ResponsiveItemOverlay>
  *         <Typography type="headline-5" margin="none">
  *           This appears at the bottom by default.
  *         </Typography>
  *       </ResponsiveItemOverlay>
- *     </ResponsiveItemContainer>
+ *     </CardContent>
  *   );
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @see {@link ResponsiveItemOverlayPosition}
- *
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
  */

package/dist/responsive-item/ResponsiveItemOverlay.js

@@ -4,25 +4,27 @@ import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
 /**
  * @example Simple Example
  * ```tsx
- * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";
+ * import { CardContent } from "@react-md/core/card/CardContent";
+ * import { ResponsiveItemOverlay } from "@react-md/core/responsive-item/ResponsiveItemOverlay";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return (
- *     <ResponsiveItemContainer>
+ *     <CardContent>
  *       <img alt="" src="/some-image.png" />
  *       <ResponsiveItemOverlay>
  *         <Typography type="headline-5" margin="none">
  *           This appears at the bottom by default.
  *         </Typography>
  *       </ResponsiveItemOverlay>
- *     </ResponsiveItemContainer>
+ *     </CardContent>
  *   );
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @see {@link ResponsiveItemOverlayPosition}
- *
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
  */ export const ResponsiveItemOverlay = /*#__PURE__*/ forwardRef(function ResponsiveItemOverlay(props, ref) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemOverlayClassNameOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type ResponsiveItemOverlayPosition,\n  responsiveItemOverlay,\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,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,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"}
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemOverlayClassNameOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type ResponsiveItemOverlayPosition,\n  responsiveItemOverlay,\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 { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CardContent>\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 *     </CardContent>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\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,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,mCAAmC;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,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"}