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

package/dist/list/_list.scss

@@ -1,3 +1,7 @@
+////
+/// @group list
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/theme";
@@ -7,33 +11,123 @@
 @use "../interaction/interaction";
 @use "../typography/typography";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the horizontal list styles.
+/// @type Boolean
 $disable-horizontal: false !default;
+
+/// Set to `true` to disable the dense list styles
+/// @type Boolean
+$disable-dense: false !default;
+
+/// Set to `true` if the `ListItem` will always enable the `disabledOpacity`
+/// prop.
+/// @see $disable-item-disabled-opacity
+/// @type Boolean
 $disable-item-disabled-color: false !default;
+
+/// Set to `true` if the `ListItem` will never enable the `disabledOpacity`
+/// prop.
+/// @type Boolean
 $disable-item-disabled-opacity: false !default;
+
+/// Set to `true` if the `ListItem` will never use an `Avatar` as an addon.
+///
+/// @type Boolean
 $disable-item-avatar: false;
+
+/// Set to `true` if the `ListItem` will never use a media addon.
+///
+/// @type Boolean
 $disable-item-media: false !default;
+
+/// Set to `true` if the `ListItem` will never use a large media addon.
+///
+/// @type Boolean
 $disable-item-media-large: false !default;
+
+/// Set to `true` if the `ListItem` will never use `height="medium"`or an icon
+/// addon.
+/// @type Boolean
 $disable-medium-height: false !default;
+
+/// Set to `true` if the `ListItem` will never use `height="large"`or an avatar
+/// addon.
+/// @type Boolean
 $disable-large-height: false !default;
+
+/// Set to `true` if the `ListItem` will never use `height="extra-large"`,
+/// secondary text or a media addon.
+///
+/// @type Boolean
 $disable-extra-large-height: false !default;
+
+/// Set to `true` if the `ListItem` will never enable the `multiline` prop for
+/// `secondaryText`.
+/// @type Boolean
 $disable-multiline-clamp: false !default;
+
+/// Set to `true` if the `ListItem` will never enable the `multiline` prop for
+/// `secondaryText`.
+/// @type Boolean
 $disable-multiline-height: true !default;
+
+/// Set to `true` if the `ListItemLink` component will not be used.
+/// @type Boolean
 $disable-item-link-styles: false !default;
 
+/// Set to `true` if the `ListSubheader` component will not be used.
+/// @type Boolean
 $disable-subheader: false !default;
+
+/// Set to `true` if the `inset` prop will never be enabled on the
+/// `ListSubheader` component.
+/// @type Boolean
 $disable-subheader-inset: false !default;
 
+/// Set to `true` if a `Divider` will never enable the `inset` prop within a
+/// `List`.
+/// @type Boolean
+$disable-divider-inset: divider.$disable-everything !default;
+
+/// The `line-height` to apply to the secondary text within a `ListItem`.
+/// @type Number
 $item-secondary-text-line-height: 1.42857 !default;
+
+/// The `max-height` to apply to the `ListItem` secondary text which enables
+/// the line-clamp behavior.
+///
+/// @type Number
 $item-secondary-text-multiline-max-height: 3rem !default;
 
+/// The vertical padding to apply to the `List` component.
+/// @type Number
 $vertical-padding: 0.5rem !default;
+
+/// The vertical padding to apply to a dense `List` component.
+/// @type Number
 $dense-vertical-padding: 0.25rem !default;
 
+/// The horizontal padding to apply to the `List` component.
+/// @type Number
 $horizontal-padding: 0 !default;
+
+/// The horizontal padding to apply to a dense `List` component.
+/// @type Number
 $dense-horizontal-padding: $horizontal-padding !default;
 
+/// The default font-size to apply to a dense `List` component. This will be
+/// applied after the `$typography-styles`.
+///
+/// @see $typography-styles
+/// @type Number
 $dense-font-size: 0.8125rem !default;
+
+/// The default typography to apply to the `List` component.
+/// @type List
 $typography-styles: map.merge(
   typography.$subtitle-1-styles,
   (
@@ -41,27 +135,113 @@ $typography-styles: map.merge(
   )
 ) !default;
 
+/// The amount of opacity to apply to a disabled `ListItem` and the
+/// `disableOpacity` prop has been enabled.
+///
+/// @type Number
 $item-disabled-opacity: 0.5 !default;
+
+/// The vertical padding to apply to `ListItem`.
+/// @type Number
 $item-vertical-padding: 0.5rem !default;
+
+/// The horizontal padding to apply to `ListItem`.
+/// @type Number
 $item-horizontal-padding: 1rem !default;
+
+/// The default height for a `ListItem` that has no addons or secondary text.
+/// @type Number
 $item-height: 3rem !default;
+
+/// The default height for a dense `ListItem` that has no addons or secondary
+/// text.
+/// @type Number
 $item-dense-height: 2.5rem !default;
+
+/// The default height for a `ListItem` that set `height="medium"` or has an
+/// icon addon with no secondary text.
+///
+/// @type Number
 $item-medium-height: 3.5rem !default;
+
+/// The default height for a dense `ListItem` that set `height="medium"` or has
+/// an icon addon with no secondary text.
+///
+/// @type Number
 $item-dense-medium-height: 3rem !default;
+
+/// The default height for a `ListItem` that set `height="large"` or has an
+/// avatar addon with no secondary text.
+///
+/// @type Number
 $item-large-height: 4rem !default;
+
+/// The default height for a dense `ListItem` that set `height="large"` or has
+/// an avatar addon with no secondary text.
+///
+/// @type Number
 $item-dense-large-height: 3.5rem !default;
+
+/// The default height for a `ListItem` that set `height="extra-large"` or has
+/// secondary text or a media addon
+///
+/// @type Number
 $item-extra-large-height: 4.5rem !default;
+
+/// The default height for a dense `ListItem` that set `height="extra-large"`
+/// or has secondary text or a media addon
+///
+/// @type Number
 $item-dense-extra-large-height: 4rem !default;
+
+/// The default `line-clamp` for a `ListItem` when the `multiline` prop is
+/// enabled and `secondaryText` was provided.
+///
+/// @type Number
 $item-multiline-clamp: 2 !default;
+
+/// The default height for a `ListItem` that has the `multiline` prop enabled.
+/// @type Number
 $item-multiline-height: 5.5rem !default;
+
+/// The default height for a `ListItem` that has the `multiline` and `dense`
+/// props enabled.
+///
+/// @type Number
 $item-dense-multiline-height: 5rem !default;
 
+/// The amount of spacing between a media addon and the `ListItem` content.
+///
+/// @type Number
 $item-media-spacing: 1rem !default;
+
+/// The default size for a media addon in the `ListItem` component.
+///
+/// @type Number
 $item-media-size: 3.5rem !default;
+
+/// The default size for a large media addon in the `ListItem` component.
+///
+/// @type Number
 $item-media-large-size: 6.25rem !default;
 
+/// The default keyline to apply to text content in a `ListItem` when an icon
+/// or `Avatar` are provided as addons. In other words, the text will be this
+/// distance from the left of the `ListItem`.
+///
+/// This will also be the `Divider` inset distance.
+///
+/// @type Number
 $item-keyline: 4.5rem !default;
 
+/// The default keyline to apply when the `List` has dense mode enabled.
+///
+/// @type Number
+$item-dense-keyline: 3.5rem !default;
+
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   horizontal-padding,
   vertical-padding,
@@ -79,6 +259,9 @@ $variables: (
   item-multiline-clamp
 );
 
+/// @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, "list");
   @if $fallback {
@@ -88,16 +271,27 @@ $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, "list")}: #{$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);
 }
 
+/// Sets the icon spacing variable with additional spacing.
+/// @access private
+/// @param {String|Number} $subtract - The additional icon spacing to subtract
+/// in the `calc` expression.
 @mixin _addon-spacing($subtract) {
   $keyline: get-var(item-keyline);
   $padding: get-var(item-horizontal-padding);
@@ -108,6 +302,7 @@ $variables: (
   );
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(horizontal-padding, $horizontal-padding);
@@ -144,12 +339,18 @@ $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) {
   @if not $disable-everything {
     @include utils.optional-layer(list, $disable-layer) {
       .rmd-list {
         @include utils.map-to-styles($typography-styles);
-        @include divider.set-var(inset, get-var(item-keyline));
+        @if not $disable-divider-inset {
+          @include divider.set-var(inset, get-var(item-keyline));
+        }
 
         list-style: none;
         margin: 0;
@@ -164,6 +365,28 @@ $variables: (
             padding: get-var(horizontal-padding) get-var(vertical-padding);
           }
         }
+
+        @if not $disable-dense {
+          &--dense {
+            @include icon.set-var(size, icon.get-var(dense-size));
+            @include set-var(vertical-padding, $dense-vertical-padding);
+            @include set-var(horizontal-padding, $dense-horizontal-padding);
+            @include set-var(item-height, $item-dense-height);
+            @include set-var(item-medium-height, $item-dense-medium-height);
+            @include set-var(item-large-height, $item-dense-large-height);
+            @include set-var(
+              item-extra-large-height,
+              $item-dense-extra-large-height
+            );
+            @include set-var(
+              item-text-multiline-height,
+              $item-dense-multiline-height
+            );
+            @include set-var(item-keyline, $item-dense-keyline);
+
+            font-size: $dense-font-size;
+          }
+        }
       }
 
       .rmd-list-item {

package/dist/list/listItemStyles.d.ts

@@ -1,20 +1,4 @@
 import { type ListItemAddonPosition, type ListItemAddonType, type ListItemHeight } from "./types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-list-item-keyline"?: string | number;
-        "--rmd-list-item-padding-h"?: string | number;
-        "--rmd-list-item-padding-v"?: string | number;
-        "--rmd-list-item-height"?: string | number;
-        "--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-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-multiline-height"?: string | number;
-    }
-}
 /** @since 6.0.0 */
 export interface ListItemClassNameOptions {
     className?: string;

package/dist/list/listItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-item-keyline\"?: string | number;\n    \"--rmd-list-item-padding-h\"?: string | number;\n    \"--rmd-list-item-padding-v\"?: string | number;\n    \"--rmd-list-item-height\"?: string | number;\n    \"--rmd-list-item-medium-height\"?: string | number;\n    \"--rmd-list-item-large-height\"?: string | number;\n    \"--rmd-list-item-extra-large-height\"?: string | number;\n    \"--rmd-list-item-multiline-clamp\"?: string | number;\n    \"--rmd-list-item-multiline-height\"?: string | number;\n    \"--rmd-list-item-media-size\"?: string | number;\n    \"--rmd-list-item-media-spacing\"?: string | number;\n    \"--rmd-list-item-text-multiline-height\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @since 6.0.0 */\nexport interface ListItemClassNameOptions {\n  className?: string;\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `true`\n   */\n  clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface InternalListItemClassNameOptions\n  extends ListItemClassNameOptions {\n  /**\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * This is prop is used internally when integrating with the\n   * {@link useElementInteraction} hook.\n   */\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItem(\n  options: InternalListItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    height = \"auto\",\n    clickable = true,\n    multiline = false,\n    disabled = false,\n    disabledOpacity = false,\n    pressedClassName,\n  } = options;\n\n  return cnb(\n    styles({\n      link,\n      [height]: height !== \"auto\",\n      multiline,\n      \"disabled-color\": disabled && !disabledOpacity,\n      \"disabled-opacity\": disabled && disabledOpacity,\n    }),\n    cssUtils({ surface: clickable }),\n    pressedClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemTextClassNameOptions {\n  className?: string;\n  /**\n   * @defaultValue `false`\n   */\n  clamped?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  secondary?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItemText(\n  options: ListItemTextClassNameOptions = {}\n): string {\n  const { className, secondary = false, clamped = false } = options;\n\n  return cnb(\n    styles(\"text\", {\n      clamped: secondary && clamped,\n      secondary,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * The addon type that is used to adjust the spacing styles.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  type?: ListItemAddonType;\n\n  /**\n   * The vertical position to use for the addon.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  position?: ListItemAddonPosition;\n\n  /**\n   * Boolean if the addon should appear after the `children`.\n   *\n   * @defaultValue `false`\n   */\n  addonAfter?: boolean;\n\n  /**\n   * The media items are centered by default using:\n   * ```scss\n   * align-items: center;\n   * display: flex;\n   * justify-content: center;\n   * ```\n   *\n   * When this is set to `true`, the flex styles will not be applied.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableCenteredMedia?: boolean;\n\n  /**\n   * Set this to `true` to disable the additional spacing applied to the addons\n   * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n   * value is used instead.\n   *\n   * @defaultValue `false`\n   */\n  disableBeforeSpacing?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function listItemAddon(\n  options: ListItemAddonClassNameOptions = {}\n): string {\n  const {\n    type = \"icon\",\n    position = \"middle\",\n    className,\n    addonAfter = false,\n    disableCenteredMedia = false,\n    disableBeforeSpacing = false,\n  } = options;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n  const isAvatar = type === \"avatar\";\n\n  return cnb(\n    styles(\"addon\", {\n      [position]: position !== \"middle\",\n      before: !disableBeforeSpacing && !addonAfter,\n      \"avatar-before\": !disableBeforeSpacing && !addonAfter && isAvatar,\n      media: isMedia,\n      \"media-large\": type === \"large-media\",\n      \"media-centered\": isMedia && !disableCenteredMedia,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","multiline","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","disableBeforeSpacing","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAwBtC,MAAMC,SAASD,IAAI;AAsDnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrBE;QACA,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;AAoDA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC5BC,uBAAuB,KAAK,EAC7B,GAAGlB;IAEJ,MAAMmB,UAAUL,SAAS,WAAWA,SAAS;IAC7C,MAAMM,WAAWN,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBM,QAAQ,CAACH,wBAAwB,CAACF;QAClC,iBAAiB,CAACE,wBAAwB,CAACF,cAAcI;QACzDE,OAAOH;QACP,eAAeL,SAAS;QACxB,kBAAkBK,WAAW,CAACF;IAChC,IACAhB;AAEJ"}
+{"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @since 6.0.0 */\nexport interface ListItemClassNameOptions {\n  className?: string;\n  /**\n   * @see {@link ListItemHeight}\n   * @defaultValue `\"auto\"`\n   */\n  height?: ListItemHeight;\n\n  /**\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Note: This does nothing if the `disabled` prop is not enabled.\n   *\n   * @defaultValue `false`\n   * @since 2.4.3\n   */\n  disabledOpacity?: boolean;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `true`\n   */\n  clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface InternalListItemClassNameOptions\n  extends ListItemClassNameOptions {\n  /**\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * This is prop is used internally when integrating with the\n   * {@link useElementInteraction} hook.\n   */\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItem(\n  options: InternalListItemClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    height = \"auto\",\n    clickable = true,\n    multiline = false,\n    disabled = false,\n    disabledOpacity = false,\n    pressedClassName,\n  } = options;\n\n  return cnb(\n    styles({\n      link,\n      [height]: height !== \"auto\",\n      multiline,\n      \"disabled-color\": disabled && !disabledOpacity,\n      \"disabled-opacity\": disabled && disabledOpacity,\n    }),\n    cssUtils({ surface: clickable }),\n    pressedClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemTextClassNameOptions {\n  className?: string;\n  /**\n   * @defaultValue `false`\n   */\n  clamped?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  secondary?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function listItemText(\n  options: ListItemTextClassNameOptions = {}\n): string {\n  const { className, secondary = false, clamped = false } = options;\n\n  return cnb(\n    styles(\"text\", {\n      clamped: secondary && clamped,\n      secondary,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ListItemAddonClassNameOptions {\n  className?: string;\n\n  /**\n   * The addon type that is used to adjust the spacing styles.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  type?: ListItemAddonType;\n\n  /**\n   * The vertical position to use for the addon.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  position?: ListItemAddonPosition;\n\n  /**\n   * Boolean if the addon should appear after the `children`.\n   *\n   * @defaultValue `false`\n   */\n  addonAfter?: boolean;\n\n  /**\n   * The media items are centered by default using:\n   * ```scss\n   * align-items: center;\n   * display: flex;\n   * justify-content: center;\n   * ```\n   *\n   * When this is set to `true`, the flex styles will not be applied.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableCenteredMedia?: boolean;\n\n  /**\n   * Set this to `true` to disable the additional spacing applied to the addons\n   * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n   * value is used instead.\n   *\n   * @defaultValue `false`\n   */\n  disableBeforeSpacing?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function listItemAddon(\n  options: ListItemAddonClassNameOptions = {}\n): string {\n  const {\n    type = \"icon\",\n    position = \"middle\",\n    className,\n    addonAfter = false,\n    disableCenteredMedia = false,\n    disableBeforeSpacing = false,\n  } = options;\n\n  const isMedia = type === \"media\" || type === \"large-media\";\n  const isAvatar = type === \"avatar\";\n\n  return cnb(\n    styles(\"addon\", {\n      [position]: position !== \"middle\",\n      before: !disableBeforeSpacing && !addonAfter,\n      \"avatar-before\": !disableBeforeSpacing && !addonAfter && isAvatar,\n      media: isMedia,\n      \"media-large\": type === \"large-media\",\n      \"media-centered\": isMedia && !disableCenteredMedia,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","listItem","options","className","link","height","clickable","multiline","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","disableBeforeSpacing","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAOtC,MAAMC,SAASD,IAAI;AAsDnB;;CAEC,GACD,OAAO,SAASE,SACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,SAAS,EACTC,OAAO,KAAK,EACZC,SAAS,MAAM,EACfC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrBE;QACA,kBAAkBC,YAAY,CAACC;QAC/B,oBAAoBD,YAAYC;IAClC,IACAX,SAAS;QAAEa,SAASL;IAAU,IAC9BI,kBACAP;AAEJ;AAgBA;;CAEC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEU,YAAY,KAAK,EAAEC,UAAU,KAAK,EAAE,GAAGZ;IAE1D,OAAOL,IACLG,OAAO,QAAQ;QACbc,SAASD,aAAaC;QACtBD;IACF,IACAV;AAEJ;AAoDA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC5BC,uBAAuB,KAAK,EAC7B,GAAGlB;IAEJ,MAAMmB,UAAUL,SAAS,WAAWA,SAAS;IAC7C,MAAMM,WAAWN,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBM,QAAQ,CAACH,wBAAwB,CAACF;QAClC,iBAAiB,CAACE,wBAAwB,CAACF,cAAcI;QACzDE,OAAOH;QACP,eAAeL,SAAS;QACxB,kBAAkBK,WAAW,CAACF;IAChC,IACAhB;AAEJ"}

package/dist/list/listStyles.d.ts

@@ -1,9 +1,3 @@
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-list-padding-h"?: string | number;
-        "--rmd-list-padding-v"?: string | number;
-    }
-}
 /** @since 6.0.0 */
 export interface ListClassNameOptions {
     className?: string;

package/dist/list/listStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/listStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-list-padding-h\"?: string | number;\n    \"--rmd-list-padding-v\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-list\");\n\n/** @since 6.0.0 */\nexport interface ListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  horizontal?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n  const { dense = false, horizontal = false, className } = options;\n\n  return cnb(styles({ dense, horizontal }), className);\n}\n"],"names":["cnb","bem","styles","list","options","dense","horizontal","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOJ,IAAIE,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C"}
+{"version":3,"sources":["../../src/list/listStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-list\");\n\n/** @since 6.0.0 */\nexport interface ListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  horizontal?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n  const { dense = false, horizontal = false, className } = options;\n\n  return cnb(styles({ dense, horizontal }), className);\n}\n"],"names":["cnb","bem","styles","list","options","dense","horizontal","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOJ,IAAIE,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C"}

package/dist/media-queries/AppSizeProvider.d.ts

@@ -41,6 +41,8 @@ export interface AppSizeProviderProps extends AppSizeQueries {
  * This component should be mounted near the root of your app to determine the
  * current app size based on different media queries.
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @since 6.0.0 Renamed from `AppSizeListener`
  */
 export declare function AppSizeProvider(props: AppSizeProviderProps): ReactElement;

package/dist/media-queries/AppSizeProvider.js

@@ -47,6 +47,8 @@ const { Provider } = context;
  * This component should be mounted near the root of your app to determine the
  * current app size based on different media queries.
  *
+ * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @since 6.0.0 Renamed from `AppSizeListener`
  */ export function AppSizeProvider(props) {
     const { ssrSize = DEFAULT_APP_SIZE, phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH, tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH, tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH, desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH, desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH, children } = props;

package/dist/media-queries/AppSizeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/AppSizeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useOrientation } from \"../useOrientation.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"./appSize.js\";\nimport { useMediaQuery } from \"./useMediaQuery.js\";\n\n/** @internal */\ninterface AppSizeContext extends AppSize {\n  __root: boolean;\n}\n\nconst context = createContext<AppSizeContext>({\n  __root: false,\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n});\ncontext.displayName = \"AppSize\";\nconst { Provider } = context;\n\n/**\n * **Note**: The app size object returned by this hook will **not** be equal\n * between renders.\n *\n * @example Simple Example\n * ```tsx\n * import { useAppSize } from \"@react-md/core/media-queries/AppSizeProvider\";\n *\n * function Example() {\n *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =\n *     useAppSize()\n *\n *   // do something based on the app size\n *   return null;\n * }\n * ```\n *\n * @returns the current app size.\n * @throws \"The `AppSizeProvider` has not been mounted.\"\n */\nexport function useAppSize(): Readonly<AppSize> {\n  const { __root, ...appSize } = useContext(context);\n  if (!__root) {\n    throw new Error(\"The `AppSizeProvider` has not been mounted.\");\n  }\n\n  return appSize;\n}\n\n/**\n * @since 6.0.0 Renamed from `AppSizeListenerProps`.\n * @since 6.0.0 Removed the `onChange` prop\n * @since 6.0.0 Renamed `defaultSize` to `ssrSize`\n */\nexport interface AppSizeProviderProps extends AppSizeQueries {\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   * @since 6.0.0\n   */\n  ssrSize?: Readonly<AppSize>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component should be mounted near the root of your app to determine the\n * current app size based on different media queries.\n *\n * @since 6.0.0 Renamed from `AppSizeListener`\n */\nexport function AppSizeProvider(props: AppSizeProviderProps): ReactElement {\n  const {\n    ssrSize = DEFAULT_APP_SIZE,\n    phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH,\n    tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH,\n    tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH,\n    desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH,\n    desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n    children,\n  } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\"The `AppSizeProvider` cannot be mounted multiple times.\");\n  }\n\n  const ssr = useSsr();\n  const matchesDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopMinWidth})`\n  );\n  const matchesLargeDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopLargeMinWidth})`\n  );\n  const matchesTablet = useMediaQuery(\n    `screen and (min-width: ${tabletMinWidth}) and (max-width: ${tabletMaxWidth})`\n  );\n  const matchesPhone = useMediaQuery(\n    `screen and (max-width: ${phoneMaxWidth})`\n  );\n  const isDesktop = matchesDesktop;\n  const isTablet = !matchesDesktop && matchesTablet;\n  const isPhone = !isTablet && !isDesktop && matchesPhone;\n  const isLandscape = useOrientation().includes(\"landscape\");\n  const isLargeDesktop = matchesLargeDesktop;\n\n  const appSize = useMemo<AppSizeContext>(\n    () => ({\n      __root: true,\n      isPhone,\n      isTablet,\n      isDesktop,\n      isLargeDesktop,\n      isLandscape,\n    }),\n    [isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet]\n  );\n\n  let value = appSize;\n  if (ssr || typeof window === \"undefined\") {\n    value = {\n      __root: true,\n      ...ssrSize,\n    };\n  }\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","useSsr","useOrientation","DEFAULT_APP_SIZE","DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","useMediaQuery","context","__root","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape","displayName","Provider","useAppSize","appSize","Error","AppSizeProvider","props","ssrSize","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","children","ssr","matchesDesktop","matchesLargeDesktop","matchesTablet","matchesPhone","includes","value","window"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAGEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,EACxBC,wBAAwB,QACnB,eAAe;AACtB,SAASC,aAAa,QAAQ,qBAAqB;AAOnD,MAAMC,wBAAUZ,cAA8B;IAC5Ca,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf;AACAN,QAAQO,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGR;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASS;IACd,MAAM,EAAER,MAAM,EAAE,GAAGS,SAAS,GAAGrB,WAAWW;IAC1C,IAAI,CAACC,QAAQ;QACX,MAAM,IAAIU,MAAM;IAClB;IAEA,OAAOD;AACT;AAiBA;;;;;;;CAOC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,UAAUrB,gBAAgB,EAC1BsB,gBAAgBnB,uBAAuB,EACvCoB,iBAAiBlB,wBAAwB,EACzCmB,iBAAiBpB,wBAAwB,EACzCqB,kBAAkBvB,yBAAyB,EAC3CwB,uBAAuBzB,+BAA+B,EACtD0B,QAAQ,EACT,GAAGP;IACJ,MAAM,EAAEZ,MAAM,EAAE,GAAGZ,WAAWW;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIU,MAAM;IAClB;IAEA,MAAMU,MAAM9B;IACZ,MAAM+B,iBAAiBvB,cACrB,CAAC,uBAAuB,EAAEmB,gBAAgB,CAAC,CAAC;IAE9C,MAAMK,sBAAsBxB,cAC1B,CAAC,uBAAuB,EAAEoB,qBAAqB,CAAC,CAAC;IAEnD,MAAMK,gBAAgBzB,cACpB,CAAC,uBAAuB,EAAEiB,eAAe,kBAAkB,EAAEC,eAAe,CAAC,CAAC;IAEhF,MAAMQ,eAAe1B,cACnB,CAAC,uBAAuB,EAAEgB,cAAc,CAAC,CAAC;IAE5C,MAAMX,YAAYkB;IAClB,MAAMnB,WAAW,CAACmB,kBAAkBE;IACpC,MAAMtB,UAAU,CAACC,YAAY,CAACC,aAAaqB;IAC3C,MAAMnB,cAAcd,iBAAiBkC,QAAQ,CAAC;IAC9C,MAAMrB,iBAAiBkB;IAEvB,MAAMb,UAAUpB,QACd,IAAO,CAAA;YACLW,QAAQ;YACRC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACF;QAAWE;QAAaD;QAAgBH;QAASC;KAAS;IAG7D,IAAIwB,QAAQjB;IACZ,IAAIW,OAAO,OAAOO,WAAW,aAAa;QACxCD,QAAQ;YACN1B,QAAQ;YACR,GAAGa,OAAO;QACZ;IACF;IAEA,qBAAO,KAACN;QAASmB,OAAOA;kBAAQP;;AAClC"}
+{"version":3,"sources":["../../src/media-queries/AppSizeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useOrientation } from \"../useOrientation.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"./appSize.js\";\nimport { useMediaQuery } from \"./useMediaQuery.js\";\n\n/** @internal */\ninterface AppSizeContext extends AppSize {\n  __root: boolean;\n}\n\nconst context = createContext<AppSizeContext>({\n  __root: false,\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n});\ncontext.displayName = \"AppSize\";\nconst { Provider } = context;\n\n/**\n * **Note**: The app size object returned by this hook will **not** be equal\n * between renders.\n *\n * @example Simple Example\n * ```tsx\n * import { useAppSize } from \"@react-md/core/media-queries/AppSizeProvider\";\n *\n * function Example() {\n *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =\n *     useAppSize()\n *\n *   // do something based on the app size\n *   return null;\n * }\n * ```\n *\n * @returns the current app size.\n * @throws \"The `AppSizeProvider` has not been mounted.\"\n */\nexport function useAppSize(): Readonly<AppSize> {\n  const { __root, ...appSize } = useContext(context);\n  if (!__root) {\n    throw new Error(\"The `AppSizeProvider` has not been mounted.\");\n  }\n\n  return appSize;\n}\n\n/**\n * @since 6.0.0 Renamed from `AppSizeListenerProps`.\n * @since 6.0.0 Removed the `onChange` prop\n * @since 6.0.0 Renamed `defaultSize` to `ssrSize`\n */\nexport interface AppSizeProviderProps extends AppSizeQueries {\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   * @since 6.0.0\n   */\n  ssrSize?: Readonly<AppSize>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component should be mounted near the root of your app to determine the\n * current app size based on different media queries.\n *\n * @see {@link https://next.react-md.dev/components/core-providers | CoreProviders Demos}\n * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}\n * @since 6.0.0 Renamed from `AppSizeListener`\n */\nexport function AppSizeProvider(props: AppSizeProviderProps): ReactElement {\n  const {\n    ssrSize = DEFAULT_APP_SIZE,\n    phoneMaxWidth = DEFAULT_PHONE_MAX_WIDTH,\n    tabletMinWidth = DEFAULT_TABLET_MIN_WIDTH,\n    tabletMaxWidth = DEFAULT_TABLET_MAX_WIDTH,\n    desktopMinWidth = DEFAULT_DESKTOP_MIN_WIDTH,\n    desktopLargeMinWidth = DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n    children,\n  } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\"The `AppSizeProvider` cannot be mounted multiple times.\");\n  }\n\n  const ssr = useSsr();\n  const matchesDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopMinWidth})`\n  );\n  const matchesLargeDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopLargeMinWidth})`\n  );\n  const matchesTablet = useMediaQuery(\n    `screen and (min-width: ${tabletMinWidth}) and (max-width: ${tabletMaxWidth})`\n  );\n  const matchesPhone = useMediaQuery(\n    `screen and (max-width: ${phoneMaxWidth})`\n  );\n  const isDesktop = matchesDesktop;\n  const isTablet = !matchesDesktop && matchesTablet;\n  const isPhone = !isTablet && !isDesktop && matchesPhone;\n  const isLandscape = useOrientation().includes(\"landscape\");\n  const isLargeDesktop = matchesLargeDesktop;\n\n  const appSize = useMemo<AppSizeContext>(\n    () => ({\n      __root: true,\n      isPhone,\n      isTablet,\n      isDesktop,\n      isLargeDesktop,\n      isLandscape,\n    }),\n    [isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet]\n  );\n\n  let value = appSize;\n  if (ssr || typeof window === \"undefined\") {\n    value = {\n      __root: true,\n      ...ssrSize,\n    };\n  }\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","useSsr","useOrientation","DEFAULT_APP_SIZE","DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","useMediaQuery","context","__root","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape","displayName","Provider","useAppSize","appSize","Error","AppSizeProvider","props","ssrSize","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","children","ssr","matchesDesktop","matchesLargeDesktop","matchesTablet","matchesPhone","includes","value","window"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAGEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,EACxBC,wBAAwB,QACnB,eAAe;AACtB,SAASC,aAAa,QAAQ,qBAAqB;AAOnD,MAAMC,wBAAUZ,cAA8B;IAC5Ca,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf;AACAN,QAAQO,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGR;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASS;IACd,MAAM,EAAER,MAAM,EAAE,GAAGS,SAAS,GAAGrB,WAAWW;IAC1C,IAAI,CAACC,QAAQ;QACX,MAAM,IAAIU,MAAM;IAClB;IAEA,OAAOD;AACT;AAiBA;;;;;;;;;CASC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,UAAUrB,gBAAgB,EAC1BsB,gBAAgBnB,uBAAuB,EACvCoB,iBAAiBlB,wBAAwB,EACzCmB,iBAAiBpB,wBAAwB,EACzCqB,kBAAkBvB,yBAAyB,EAC3CwB,uBAAuBzB,+BAA+B,EACtD0B,QAAQ,EACT,GAAGP;IACJ,MAAM,EAAEZ,MAAM,EAAE,GAAGZ,WAAWW;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIU,MAAM;IAClB;IAEA,MAAMU,MAAM9B;IACZ,MAAM+B,iBAAiBvB,cACrB,CAAC,uBAAuB,EAAEmB,gBAAgB,CAAC,CAAC;IAE9C,MAAMK,sBAAsBxB,cAC1B,CAAC,uBAAuB,EAAEoB,qBAAqB,CAAC,CAAC;IAEnD,MAAMK,gBAAgBzB,cACpB,CAAC,uBAAuB,EAAEiB,eAAe,kBAAkB,EAAEC,eAAe,CAAC,CAAC;IAEhF,MAAMQ,eAAe1B,cACnB,CAAC,uBAAuB,EAAEgB,cAAc,CAAC,CAAC;IAE5C,MAAMX,YAAYkB;IAClB,MAAMnB,WAAW,CAACmB,kBAAkBE;IACpC,MAAMtB,UAAU,CAACC,YAAY,CAACC,aAAaqB;IAC3C,MAAMnB,cAAcd,iBAAiBkC,QAAQ,CAAC;IAC9C,MAAMrB,iBAAiBkB;IAEvB,MAAMb,UAAUpB,QACd,IAAO,CAAA;YACLW,QAAQ;YACRC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACF;QAAWE;QAAaD;QAAgBH;QAASC;KAAS;IAG7D,IAAIwB,QAAQjB;IACZ,IAAIW,OAAO,OAAOO,WAAW,aAAa;QACxCD,QAAQ;YACN1B,QAAQ;YACR,GAAGa,OAAO;QACZ;IACF;IAEA,qBAAO,KAACN;QAASmB,OAAOA;kBAAQP;;AAClC"}

package/dist/media-queries/_media-queries.scss

@@ -1,54 +1,163 @@
+////
+/// @group core.media-queries
+////
+
+@use "../utils";
+
+/// The default phone max width media query. This should match the
+/// `phoneMaxWidth` value on the `AppSizeProvider`.
+///
+/// @type String|Number
 $phone-max-width: 47.9375em !default;
+
+/// The default tablet min width media query. This should match the
+/// `tabletMinWidth` value on the `AppSizeProvider`.
+///
+/// @type String|Number
 $tablet-min-width: 48em !default;
+
+/// The default tablet max width media query. This should match the
+/// `tabletMaxWidth` value on the `AppSizeProvider`.
+///
+/// @type String|Number
 $tablet-max-width: 64em !default;
+
+/// The default desktop min width media query. This should match the
+/// `desktopMinWidth` value on the `AppSizeProvider`.
+///
+/// @type String|Number
 $desktop-min-width: 64.0625em !default;
+
+/// The default large desktop min width media query. This should match the
+/// `largeDesktopMinWidth` value on the `AppSizeProvider`.
+///
+/// @type String|Number
 $large-desktop-min-width: 80em !default;
 
+/// @access private
+/// @type List
+$_media-types: (phone, tablet, tablet-only, desktop, large-desktop);
+
+/// Applies styles for phones only.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
+///
+/// @example scss - Example Usage SCSS
+///   .example {
+///     background-color: red;
+///
+///     @include phone-media {
+///       color: blue;
+///     }
+///   }
+///
+/// @content
 @mixin phone-media {
   @media screen and (max-width: #{$phone-max-width}) {
     @content;
   }
 }
 
+/// Applies styles when the viewport is at least as wide as a tablet's min
+/// width.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
+///
+/// @example scss
+///   .example {
+///     display: flex;
+///     flex-direction: column;
+///
+///     @include tablet-media {
+///       flex-direction: row;
+///     }
+///   }
+///
+/// @content
 @mixin tablet-media {
   @media screen and (min-width: #{$tablet-min-width}) {
     @content;
   }
 }
 
+/// Applies styles for tablets only.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
+///
+/// @example scss
+///   .example {
+///     background-color: red;
+///
+///     @include tablet-only-media {
+///       color: blue;
+///     }
+///   }
+///
+/// @content
 @mixin tablet-only-media {
   @media screen and (min-width: #{$tablet-min-width}) and (max-width: #{$tablet-max-width}) {
     @content;
   }
 }
 
+/// Applies styles when the viewport is at least as wide as a desktop's min
+/// width.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
+///
+/// @example scss
+///   .example {
+///     width: 100%;
+///
+///     @include desktop-media {
+///       width: 33%;
+///     }
+///   }
+///
+/// @content
 @mixin desktop-media {
   @media screen and (min-width: #{$desktop-min-width}) {
     @content;
   }
 }
 
+/// Applies styles when the viewport is at least as wide as a large desktop's
+/// min width.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
-/// Creates a media query so that screen sizes matching at least the min width
-/// for a large desktop will gain these styles.
+///
+/// @example scss
+///   .example {
+///     width: 100%;
+///
+///     @include large-desktop-media {
+///       width: 33%;
+///     }
+///   }
+///
+/// @content
 @mixin large-desktop-media {
   @media screen and (min-width: #{$large-desktop-min-width}) {
     @content;
   }
 }
 
+/// Applies one of the media queries.
+///
 /// Note: This will need to be included at the end of a block with the new Sass
 /// rules or prefix styles with `& {}`
+///
+/// @param {String} $type - This should be one of `phone`, `tablet`,
+/// `tablet-only`, `desktop`, or `large-desktop`
+/// @content
 @mixin media($type) {
+  $type: utils.validate($_media-types, $type, "media type");
+
   @if $type == phone {
     @include phone-media {
       @content;
@@ -69,7 +178,5 @@ $large-desktop-min-width: 80em !default;
     @include large-desktop-media {
       @content;
     }
-  } @else {
-    @error "invalid media type: #{$type}";
   }
 }

package/dist/media-queries/useMediaQuery.d.ts

@@ -11,6 +11,8 @@
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-media-query | useMediaQuery Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @param query - The media query to use
  * @param disabled - When `true`, the `window.matchMedia` API will not be
  * activated and the hook will return the last cached value.

package/dist/media-queries/useMediaQuery.js

@@ -14,6 +14,8 @@ import { useSsr } from "../SsrProvider.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-media-query | useMediaQuery Demos}
+ * @see {@link https://next.react-md.dev/components/app-size-provider | AppSizeProvider Demos}
  * @param query - The media query to use
  * @param disabled - When `true`, the `window.matchMedia` API will not be
  * activated and the hook will return the last cached value.