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

package/dist/list/listItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/listItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type {\n  ListItemAddonPosition,\n  ListItemAddonType,\n  ListItemHeight,\n} from \"./types.js\";\n\nconst styles = bem(\"rmd-list-item\");\n\n/** @remarks \\@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  threeLines?: 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   * @remarks \\@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/** @remarks \\@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 * @remarks \\@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    threeLines = false,\n    disabled = false,\n    disabledOpacity = false,\n    pressedClassName,\n  } = options;\n\n  return cnb(\n    styles({\n      link,\n      [height]: height !== \"auto\",\n      \"three-lines\": threeLines,\n      \"disabled-color\": disabled && !disabledOpacity,\n      \"disabled-opacity\": disabled && disabledOpacity,\n    }),\n    cssUtils({ surface: clickable }),\n    pressedClassName,\n    className\n  );\n}\n\n/** @remarks \\@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 * @remarks \\@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/** @remarks \\@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   * @remarks \\@since 6.0.0\n   */\n  disableCenteredMedia?: boolean;\n}\n\n/**\n *\n * @remarks \\@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  } = 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: !addonAfter,\n      \"avatar-before\": !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","threeLines","disabled","disabledOpacity","pressedClassName","surface","listItemText","secondary","clamped","listItemAddon","type","position","addonAfter","disableCenteredMedia","isMedia","isAvatar","before","media"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,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,aAAa,KAAK,EAClBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,gBAAgB,EACjB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACA,CAACC,OAAO,EAAEA,WAAW;QACrB,eAAeE;QACf,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;AA2CA;;;CAGC,GACD,OAAO,SAASY,cACdb,UAAyC,CAAC,CAAC;IAE3C,MAAM,EACJc,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBd,SAAS,EACTe,aAAa,KAAK,EAClBC,uBAAuB,KAAK,EAC7B,GAAGjB;IAEJ,MAAMkB,UAAUJ,SAAS,WAAWA,SAAS;IAC7C,MAAMK,WAAWL,SAAS;IAE1B,OAAOnB,IACLG,OAAO,SAAS;QACd,CAACiB,SAAS,EAAEA,aAAa;QACzBK,QAAQ,CAACJ;QACT,iBAAiB,CAACA,cAAcG;QAChCE,OAAOH;QACP,eAAeJ,SAAS;QACxB,kBAAkBI,WAAW,CAACD;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\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"}

package/dist/list/listStyles.d.ts

@@ -0,0 +1,18 @@
+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;
+    /** @defaultValue `false` */
+    dense?: boolean;
+    /** @defaultValue `false` */
+    horizontal?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function list(options?: ListClassNameOptions): string;

package/dist/list/listStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-list");
+/**
+ * @since 6.0.0
+ */ export function list(options = {}) {
+    const { dense = false, horizontal = false, className } = options;
+    return cnb(styles({
+        dense,
+        horizontal
+    }), className);
+}
+
+//# sourceMappingURL=listStyles.js.map

package/dist/list/listStyles.js.map

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

package/dist/list/types.d.ts

@@ -1,11 +1,11 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import type { PropsWithRef } from "../types.js";
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PropsWithRef } from "../types.js";
 /**
  * The height to apply to the list item.
  *
  * Conversions:
  *
- * - height !== "auto" -> height
+ * - height !== undefined && height !== "auto" -> height
  * - secondaryText or left/right addon is media/media-large  -> "extra-large"
  * - left/right addon is avatar -> "large"
  * - left/right addon is icon -> "medium"
@@ -14,7 +14,7 @@ import type { PropsWithRef } from "../types.js";
 export type ListItemHeight = "auto" | "normal" | "medium" | "large" | "extra-large";
 export type ListItemAddonPosition = "top" | "middle" | "bottom";
 export type ListItemAddonType = "icon" | "avatar" | "media" | "large-media";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ListItemChildrenAddonProps {
     /**
      * An optional addon to display to the left of the `primaryText` or
@@ -37,7 +37,7 @@ export interface ListItemChildrenAddonProps {
      */
     leftAddonPosition?: ListItemAddonPosition;
     /**
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     leftAddonClassName?: string;
     /**
@@ -45,9 +45,17 @@ export interface ListItemChildrenAddonProps {
      * apply the correct styling.
      *
      * @defaultValue `leftAddonType === "media" || leftAddonType === "large-media"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     leftAddonForceWrap?: boolean;
+    /**
+     * Set this to `true` to disable the additional spacing applied to the addons
+     * that appear before the `children` and the normal `--rmd-text-icon-spacing`
+     * value is used instead.
+     *
+     * @defaultValue `false`
+     */
+    disableLeftAddonSpacing?: boolean;
     /**
      * An optional addon to display to the right of the `primaryText` or
      * `children` and should be used with the `rightAddonType` prop to adjust
@@ -69,7 +77,7 @@ export interface ListItemChildrenAddonProps {
      */
     rightAddonPosition?: ListItemAddonPosition;
     /**
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     rightAddonClassName?: string;
     /**
@@ -77,7 +85,7 @@ export interface ListItemChildrenAddonProps {
      * apply the correct styling.
      *
      * @defaultValue `rightAddonType === "media" || rightAddonType === "large-media"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     rightAddonForceWrap?: boolean;
     /**
@@ -91,7 +99,7 @@ export interface ListItemChildrenAddonProps {
      * When this is set to `true`, the flex styles will not be applied.
      *
      * @defaultValue `false`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     disableLeftAddonCenteredMedia?: boolean;
     /**
@@ -105,22 +113,29 @@ export interface ListItemChildrenAddonProps {
      * When this is set to `true`, the flex styles will not be applied.
      *
      * @defaultValue `false`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     disableRightAddonCenteredMedia?: boolean;
 }
-export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
+/**
+ * Note: This interface was added since there are components that replace the
+ * {@link ListItemChildrenAddonProps} with renamed versions but should still
+ * support everything for rendering text.
+ *
+ * @since 6.0.0
+ */
+export interface ListItemChildrenTextProps {
     /**
-     * The main content to display. When the `textChildren` prop is enabled and
-     * there is child content, it will be treated as primary text and update the
-     * styles automatically.
+     * The main content to display that defaults to being wrapped in the
+     * `ListItemText` component. Enable the {@link disableTextChildren} prop to
+     * render without the additional `ListItemText` wrapper.
      */
     children?: ReactNode;
     /**
      * Any additional props that should be passed to the `<span>` surrounding
      * the {@link children}, {@link primaryText}, and {@link secondaryText}.
      *
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     /**
@@ -137,7 +152,7 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
      * Set this to `true` if the {@link children} should not automatically be
      * wrapped in the `ListItemText` component.
      *
-     * @remarks \@since 6.0.0 Renamed from `textChildren` since it was defaulted on.
+     * @since 6.0.0 Renamed from `textChildren` since it was defaulted on.
      * @defaultValue `false`
      */
     disableTextChildren?: boolean;
@@ -160,15 +175,25 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
      * Any additional props that should be passed to the `<span>` surrounding
      * the {@link secondaryText}.
      *
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
     /**
      * Set this to `true` to allow the {@link secondaryText} to span multiple
-     * lines and use the CSS clamp after two lines of text are visible.
+     * lines and use the CSS clamp after two lines of text are visible. The number
+     * of lines can be configured by `core.$list-item-multiline-clamp` or
+     * `@include core.list-set-var(item-multiline-clamp, $new-value)`.
      *
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}
      * @defaultValue `false`
      */
-    threeLines?: boolean;
+    multiline?: boolean;
+}
+/**
+ * @since 6.0.0 Extends the `ListItemChildrenTextProps` and
+ * `ListItemChildrenAddonProps` interfaces.
+ * @since 6.0.0 Added `textProps` and `secondaryTextClassName`
+ * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
+ */
+export interface ListItemChildrenProps extends ListItemChildrenTextProps, ListItemChildrenAddonProps {
 }

package/dist/list/types.js

@@ -1,3 +1,8 @@
-export { };
+/**
+ * @since 6.0.0 Extends the `ListItemChildrenTextProps` and
+ * `ListItemChildrenAddonProps` interfaces.
+ * @since 6.0.0 Added `textProps` and `secondaryTextClassName`
+ * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
+ */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/list/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport type { PropsWithRef } from \"../types.js\";\n\n/**\n * The height to apply to the list item.\n *\n * Conversions:\n *\n * - height !== \"auto\" -&gt; height\n * - secondaryText or left/right addon is media/media-large  -&gt; \"extra-large\"\n * - left/right addon is avatar -&gt; \"large\"\n * - left/right addon is icon -&gt; \"medium\"\n * - no addons and no secondary text -&gt; \"normal\"\n */\nexport type ListItemHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"medium\"\n  | \"large\"\n  | \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" | \"middle\" | \"bottom\";\nexport type ListItemAddonType = \"icon\" | \"avatar\" | \"media\" | \"large-media\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListItemChildrenAddonProps {\n  /**\n   * An optional addon to display to the left of the `primaryText` or\n   * `children` and should be used with the `leftAddonType` prop to adjust\n   * spacing.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * The type of the addon that appears to the left of the `primaryText` or\n   * `children`.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  leftAddonType?: ListItemAddonType;\n\n  /**\n   * The vertical position the left icon, avatar, media, or large media\n   * should be placed.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  leftAddonPosition?: ListItemAddonPosition;\n\n  /**\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonClassName?: string;\n\n  /**\n   * Set this to `true` if your addon does not accept a `className` prop to\n   * apply the correct styling.\n   *\n   * @defaultValue `leftAddonType === \"media\" || leftAddonType === \"large-media\"`\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonForceWrap?: boolean;\n\n  /**\n   * An optional addon to display to the right of the `primaryText` or\n   * `children` and should be used with the `rightAddonType` prop to adjust\n   * spacing.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * The type of the addon that appears to the right of the `primaryText` or\n   * `children`.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  rightAddonType?: ListItemAddonType;\n\n  /**\n   * The vertical position the right icon, avatar, media, or large media\n   * should be placed.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  rightAddonPosition?: ListItemAddonPosition;\n\n  /**\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonClassName?: string;\n\n  /**\n   * Set this to `true` if your addon does not accept a `className` prop to\n   * apply the correct styling.\n   *\n   * @defaultValue `rightAddonType === \"media\" || rightAddonType === \"large-media\"`\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonForceWrap?: 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   * @remarks \\@since 6.0.0\n   */\n  disableLeftAddonCenteredMedia?: 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   * @remarks \\@since 6.0.0\n   */\n  disableRightAddonCenteredMedia?: boolean;\n}\n\nexport interface ListItemChildrenProps extends ListItemChildrenAddonProps {\n  /**\n   * The main content to display. When the `textChildren` prop is enabled and\n   * there is child content, it will be treated as primary text and update the\n   * styles automatically.\n   */\n  children?: ReactNode;\n\n  /**\n   * Any additional props that should be passed to the `<span>` surrounding\n   * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * An optional className to apply to the `<span>` that surrounds the\n   * `primaryText` and optionally `secondaryText` within the list item.\n   */\n  textClassName?: string;\n\n  /**\n   * An optional className to apply to the `<span>` that surrounds the\n   * `secondaryText` within the list item.\n   */\n  secondaryTextClassName?: string;\n\n  /**\n   * Set this to `true` if the {@link children} should not automatically be\n   * wrapped in the `ListItemText` component.\n   *\n   * @remarks \\@since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n   * @defaultValue `false`\n   */\n  disableTextChildren?: boolean;\n\n  /**\n   * An optional element that should be rendered as the `primaryText` within the\n   * list item. It is most likely easier to use the `children` prop instead, but\n   * this allows you to create more complex components with the `ListItem` since\n   * you can provided `children` and have the styles for the `primaryText` still\n   * applied. By default, this will only allow one line of text and add ellipsis\n   * for any text overflow.\n   */\n  primaryText?: ReactNode;\n\n  /**\n   * An optional element that should be rendered as the `secondaryText` within\n   * the list item. By default, this will only span one line and add ellipsis\n   * for overflow.\n   */\n  secondaryText?: ReactNode;\n\n  /**\n   * Any additional props that should be passed to the `<span>` surrounding\n   * the {@link secondaryText}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  secondaryTextProps?: PropsWithRef<\n    HTMLAttributes<HTMLSpanElement>,\n    HTMLSpanElement\n  >;\n\n  /**\n   * Set this to `true` to allow the {@link secondaryText} to span multiple\n   * lines and use the CSS clamp after two lines of text are visible.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n   * @defaultValue `false`\n   */\n  threeLines?: boolean;\n}\n"],"names":[],"mappings":"AAmIA,WAyEC"}
+{"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * The height to apply to the list item.\n *\n * Conversions:\n *\n * - height !== undefined && height !== \"auto\" -&gt; height\n * - secondaryText or left/right addon is media/media-large  -&gt; \"extra-large\"\n * - left/right addon is avatar -&gt; \"large\"\n * - left/right addon is icon -&gt; \"medium\"\n * - no addons and no secondary text -&gt; \"normal\"\n */\nexport type ListItemHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"medium\"\n  | \"large\"\n  | \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" | \"middle\" | \"bottom\";\nexport type ListItemAddonType = \"icon\" | \"avatar\" | \"media\" | \"large-media\";\n\n/** @since 6.0.0 */\nexport interface ListItemChildrenAddonProps {\n  /**\n   * An optional addon to display to the left of the `primaryText` or\n   * `children` and should be used with the `leftAddonType` prop to adjust\n   * spacing.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * The type of the addon that appears to the left of the `primaryText` or\n   * `children`.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  leftAddonType?: ListItemAddonType;\n\n  /**\n   * The vertical position the left icon, avatar, media, or large media\n   * should be placed.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  leftAddonPosition?: ListItemAddonPosition;\n\n  /**\n   * @since 6.0.0\n   */\n  leftAddonClassName?: string;\n\n  /**\n   * Set this to `true` if your addon does not accept a `className` prop to\n   * apply the correct styling.\n   *\n   * @defaultValue `leftAddonType === \"media\" || leftAddonType === \"large-media\"`\n   * @since 6.0.0\n   */\n  leftAddonForceWrap?: 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  disableLeftAddonSpacing?: boolean;\n\n  /**\n   * An optional addon to display to the right of the `primaryText` or\n   * `children` and should be used with the `rightAddonType` prop to adjust\n   * spacing.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * The type of the addon that appears to the right of the `primaryText` or\n   * `children`.\n   *\n   * @defaultValue `\"icon\"`\n   */\n  rightAddonType?: ListItemAddonType;\n\n  /**\n   * The vertical position the right icon, avatar, media, or large media\n   * should be placed.\n   *\n   * @defaultValue `\"middle\"`\n   */\n  rightAddonPosition?: ListItemAddonPosition;\n\n  /**\n   * @since 6.0.0\n   */\n  rightAddonClassName?: string;\n\n  /**\n   * Set this to `true` if your addon does not accept a `className` prop to\n   * apply the correct styling.\n   *\n   * @defaultValue `rightAddonType === \"media\" || rightAddonType === \"large-media\"`\n   * @since 6.0.0\n   */\n  rightAddonForceWrap?: 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  disableLeftAddonCenteredMedia?: 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  disableRightAddonCenteredMedia?: boolean;\n}\n\n/**\n * Note: This interface was added since there are components that replace the\n * {@link ListItemChildrenAddonProps} with renamed versions but should still\n * support everything for rendering text.\n *\n * @since 6.0.0\n */\nexport interface ListItemChildrenTextProps {\n  /**\n   * The main content to display that defaults to being wrapped in the\n   * `ListItemText` component. Enable the {@link disableTextChildren} prop to\n   * render without the additional `ListItemText` wrapper.\n   */\n  children?: ReactNode;\n\n  /**\n   * Any additional props that should be passed to the `<span>` surrounding\n   * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n   *\n   * @since 6.0.0\n   */\n  textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * An optional className to apply to the `<span>` that surrounds the\n   * `primaryText` and optionally `secondaryText` within the list item.\n   */\n  textClassName?: string;\n\n  /**\n   * An optional className to apply to the `<span>` that surrounds the\n   * `secondaryText` within the list item.\n   */\n  secondaryTextClassName?: string;\n\n  /**\n   * Set this to `true` if the {@link children} should not automatically be\n   * wrapped in the `ListItemText` component.\n   *\n   * @since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n   * @defaultValue `false`\n   */\n  disableTextChildren?: boolean;\n\n  /**\n   * An optional element that should be rendered as the `primaryText` within the\n   * list item. It is most likely easier to use the `children` prop instead, but\n   * this allows you to create more complex components with the `ListItem` since\n   * you can provided `children` and have the styles for the `primaryText` still\n   * applied. By default, this will only allow one line of text and add ellipsis\n   * for any text overflow.\n   */\n  primaryText?: ReactNode;\n\n  /**\n   * An optional element that should be rendered as the `secondaryText` within\n   * the list item. By default, this will only span one line and add ellipsis\n   * for overflow.\n   */\n  secondaryText?: ReactNode;\n\n  /**\n   * Any additional props that should be passed to the `<span>` surrounding\n   * the {@link secondaryText}.\n   *\n   * @since 6.0.0\n   */\n  secondaryTextProps?: PropsWithRef<\n    HTMLAttributes<HTMLSpanElement>,\n    HTMLSpanElement\n  >;\n\n  /**\n   * Set this to `true` to allow the {@link secondaryText} to span multiple\n   * lines and use the CSS clamp after two lines of text are visible. The number\n   * of lines can be configured by `core.$list-item-multiline-clamp` or\n   * `@include core.list-set-var(item-multiline-clamp, $new-value)`.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n   * @defaultValue `false`\n   */\n  multiline?: boolean;\n}\n\n/**\n * @since 6.0.0 Extends the `ListItemChildrenTextProps` and\n * `ListItemChildrenAddonProps` interfaces.\n * @since 6.0.0 Added `textProps` and `secondaryTextClassName`\n * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`\n */\nexport interface ListItemChildrenProps\n  extends ListItemChildrenTextProps,\n    ListItemChildrenAddonProps {}\n"],"names":[],"mappings":"AAiOA;;;;;CAKC,GACD,WAEiC"}

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

@@ -4,10 +4,9 @@ import { type AppSize, type AppSizeQueries } from "./appSize.js";
  * **Note**: The app size object returned by this hook will **not** be equal
  * between renders.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useAppSize } from "@react-md/core";
+ * import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
  *
  * function Example() {
  *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =
@@ -22,10 +21,16 @@ import { type AppSize, type AppSizeQueries } from "./appSize.js";
  * @throws "The `AppSizeProvider` has not been mounted."
  */
 export declare function useAppSize(): Readonly<AppSize>;
+/**
+ * @since 6.0.0 Renamed from `AppSizeListenerProps`.
+ * @since 6.0.0 Removed the `onChange` prop
+ * @since 6.0.0 Renamed `defaultSize` to `ssrSize`
+ */
 export interface AppSizeProviderProps extends AppSizeQueries {
     /**
      * @defaultValue `DEFAULT_APP_SIZE`
      * @see {@link DEFAULT_APP_SIZE}
+     * @since 6.0.0
      */
     ssrSize?: Readonly<AppSize>;
     children: ReactNode;
@@ -35,5 +40,7 @@ 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.
+ *
+ * @since 6.0.0 Renamed from `AppSizeListener`
  */
 export declare function AppSizeProvider(props: AppSizeProviderProps): ReactElement;

package/dist/media-queries/AppSizeProvider.js

@@ -19,10 +19,9 @@ const { Provider } = context;
  * **Note**: The app size object returned by this hook will **not** be equal
  * between renders.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useAppSize } from "@react-md/core";
+ * import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
  *
  * function Example() {
  *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =
@@ -47,6 +46,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.
+ *
+ * @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;
     const { __root } = useContext(context);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/AppSizeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useOrientation } from \"../useOrientation.js\";\nimport {\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  type AppSize,\n  type AppSizeQueries,\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\n * Simple Example\n * ```tsx\n * import { useAppSize } from \"@react-md/core\";\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\nexport interface AppSizeProviderProps extends AppSizeQueries {\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\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 */\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;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SACEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,EACxBC,wBAAwB,QAGnB,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;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASS;IACd,MAAM,EAAER,MAAM,EAAE,GAAGS,SAAS,GAAGrB,WAAWW;IAC1C,IAAI,CAACC,QAAQ;QACX,MAAM,IAAIU,MAAM;IAClB;IAEA,OAAOD;AACT;AAWA;;;;;CAKC,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 * @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"}

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

@@ -4,30 +4,40 @@ $tablet-max-width: 64em !default;
 $desktop-min-width: 64.0625em !default;
 $large-desktop-min-width: 80em !default;
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin phone-media {
   @media screen and (max-width: #{$phone-max-width}) {
     @content;
   }
 }
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin tablet-media {
   @media screen and (min-width: #{$tablet-min-width}) {
     @content;
   }
 }
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin tablet-only-media {
   @media screen and (min-width: #{$tablet-min-width}) and (max-width: #{$tablet-max-width}) {
     @content;
   }
 }
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin desktop-media {
   @media screen and (min-width: #{$desktop-min-width}) {
     @content;
   }
 }
 
+/// 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.
 @mixin large-desktop-media {
@@ -36,6 +46,8 @@ $large-desktop-min-width: 80em !default;
   }
 }
 
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
 @mixin media($type) {
   @if $type == phone {
     @include phone-media {

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

@@ -1,14 +1,14 @@
 export type QuerySize = number | `${number}${string}`;
 /** @defaultValue `47.9375em` */
-export declare const DEFAULT_PHONE_MAX_WIDTH: `${number}em`;
+export declare const DEFAULT_PHONE_MAX_WIDTH = "47.9375em";
 /** @defaultValue `48em` */
-export declare const DEFAULT_TABLET_MIN_WIDTH: `${number}em`;
+export declare const DEFAULT_TABLET_MIN_WIDTH = "48em";
 /** @defaultValue `64em` */
-export declare const DEFAULT_TABLET_MAX_WIDTH: `${number}em`;
+export declare const DEFAULT_TABLET_MAX_WIDTH = "64em";
 /** @defaultValue `64.0625em` */
-export declare const DEFAULT_DESKTOP_MIN_WIDTH: `${number}em`;
+export declare const DEFAULT_DESKTOP_MIN_WIDTH = "64.0625em";
 /** @defaultValue `80em` */
-export declare const DEFAULT_DESKTOP_LARGE_MIN_WIDTH: `${number}em`;
+export declare const DEFAULT_DESKTOP_LARGE_MIN_WIDTH = "80em";
 export interface AppSizeQueries {
     /**
      * The max width to use for phones. This one is a max width unlike the others

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/appSize.ts"],"sourcesContent":["export type QuerySize = number | `${number}${string}`;\n\n/** @defaultValue `47.9375em` */\nexport const DEFAULT_PHONE_MAX_WIDTH = `${767 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `48em` */\nexport const DEFAULT_TABLET_MIN_WIDTH = `${768 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64em` */\nexport const DEFAULT_TABLET_MAX_WIDTH = `${1024 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64.0625em` */\nexport const DEFAULT_DESKTOP_MIN_WIDTH = `${1025 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `80em` */\nexport const DEFAULT_DESKTOP_LARGE_MIN_WIDTH = `${\n  1280 / 16\n}em` satisfies QuerySize;\n\nexport interface AppSizeQueries {\n  /**\n   * The max width to use for phones. This one is a max width unlike the others\n   * since everything from 0 to this value will be considered a phone.\n   *\n   * @defaultValue `47.9375em`\n   * @see {@link DEFAULT_PHONE_MAX_WIDTH}\n   */\n  phoneMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a tablet device.\n   *\n   * @defaultValue `48em`\n   * @see {@link DEFAULT_TABLET_MIN_WIDTH}\n   */\n  tabletMinWidth?: QuerySize;\n\n  /**\n   * The max width for a tablet device. This should normally be `1px` less than\n   * the `desktopMinWidth`, but it can be any value if needed. The tablet has a\n   * range of min to max so that you can have a bit more control.\n   *\n   * @defaultValue `64em`\n   * @see {@link DEFAULT_TABLET_MAX_WIDTH}\n   */\n  tabletMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a desktop screen.\n   *\n   * @defaultValue `64.0625em`\n   * @see {@link DEFAULT_DESKTOP_MIN_WIDTH}\n   */\n  desktopMinWidth?: QuerySize;\n\n  /**\n   * The min width for a large (1440p, 4k, etc) desktop screen.\n   *\n   * @defaultValue `80em`\n   * @see {@link DEFAULT_DESKTOP_LARGE_MIN_WIDTH}\n   */\n  desktopLargeMinWidth?: QuerySize;\n}\n\nexport const DEFAULT_APP_SIZE_QUERIES: Readonly<AppSizeQueries> = {\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};\n\n/**\n * The current size for your application. This should work both server side and\n * client side, but you will have much better results client side.\n */\nexport interface AppSize {\n  /**\n   * Boolean if currently matching a phone by comparing the max width of the\n   * device.\n   */\n  isPhone: boolean;\n\n  /**\n   * Boolean if currently matching a tablet by comparing the max width of the\n   * device.\n   */\n  isTablet: boolean;\n\n  /**\n   * Boolean if currently matching a desktop screen by comparing the max width\n   * of the device.\n   */\n  isDesktop: boolean;\n\n  /**\n   * Boolean if currently matching a large desktop screen by comparing the max\n   * width of the device.\n   */\n  isLargeDesktop: boolean;\n\n  /**\n   * Boolean if the app is considered to be in landscape mode. This will just\n   * verify that the window width is greater than the window height.\n   *\n   * NOTE: This might not be super accurate on Android devices since the soft\n   * keyboard will change the dimensions of the viewport when it appears. It is\n   * recommended to use the `useOrientation` hook as well if you'd like to get\n   * the current orientation type.\n   */\n  isLandscape: boolean;\n}\n\nexport const DEFAULT_APP_SIZE: AppSize = {\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n};\n"],"names":["DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_APP_SIZE_QUERIES","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","DEFAULT_APP_SIZE","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape"],"mappings":"AAEA,8BAA8B,GAC9B,OAAO,MAAMA,0BAA0B,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE3E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE5E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE7E,8BAA8B,GAC9B,OAAO,MAAMC,4BAA4B,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE9E,yBAAyB,GACzB,OAAO,MAAMC,kCAAkC,CAAC,EAC9C,OAAO,GACR,EAAE,CAAC,CAAqB;AA+CzB,OAAO,MAAMC,2BAAqD;IAChEC,eAAeN;IACfO,gBAAgBN;IAChBO,gBAAgBN;IAChBO,iBAAiBN;IACjBO,sBAAsBN;AACxB,EAAE;AA2CF,OAAO,MAAMO,mBAA4B;IACvCC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf,EAAE"}
+{"version":3,"sources":["../../src/media-queries/appSize.ts"],"sourcesContent":["export type QuerySize = number | `${number}${string}`;\n\n/** @defaultValue `47.9375em` */\nexport const DEFAULT_PHONE_MAX_WIDTH = `${767 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `48em` */\nexport const DEFAULT_TABLET_MIN_WIDTH = `${768 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64em` */\nexport const DEFAULT_TABLET_MAX_WIDTH = `${1024 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `64.0625em` */\nexport const DEFAULT_DESKTOP_MIN_WIDTH = `${1025 / 16}em` satisfies QuerySize;\n\n/** @defaultValue `80em` */\nexport const DEFAULT_DESKTOP_LARGE_MIN_WIDTH = `${\n  1280 / 16\n}em` satisfies QuerySize;\n\nexport interface AppSizeQueries {\n  /**\n   * The max width to use for phones. This one is a max width unlike the others\n   * since everything from 0 to this value will be considered a phone.\n   *\n   * @defaultValue `47.9375em`\n   * @see {@link DEFAULT_PHONE_MAX_WIDTH}\n   */\n  phoneMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a tablet device.\n   *\n   * @defaultValue `48em`\n   * @see {@link DEFAULT_TABLET_MIN_WIDTH}\n   */\n  tabletMinWidth?: QuerySize;\n\n  /**\n   * The max width for a tablet device. This should normally be `1px` less than\n   * the `desktopMinWidth`, but it can be any value if needed. The tablet has a\n   * range of min to max so that you can have a bit more control.\n   *\n   * @defaultValue `64em`\n   * @see {@link DEFAULT_TABLET_MAX_WIDTH}\n   */\n  tabletMaxWidth?: QuerySize;\n\n  /**\n   * The min width for a desktop screen.\n   *\n   * @defaultValue `64.0625em`\n   * @see {@link DEFAULT_DESKTOP_MIN_WIDTH}\n   */\n  desktopMinWidth?: QuerySize;\n\n  /**\n   * The min width for a large (1440p, 4k, etc) desktop screen.\n   *\n   * @defaultValue `80em`\n   * @see {@link DEFAULT_DESKTOP_LARGE_MIN_WIDTH}\n   */\n  desktopLargeMinWidth?: QuerySize;\n}\n\nexport const DEFAULT_APP_SIZE_QUERIES: Readonly<AppSizeQueries> = {\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};\n\n/**\n * The current size for your application. This should work both server side and\n * client side, but you will have much better results client side.\n */\nexport interface AppSize {\n  /**\n   * Boolean if currently matching a phone by comparing the max width of the\n   * device.\n   */\n  isPhone: boolean;\n\n  /**\n   * Boolean if currently matching a tablet by comparing the max width of the\n   * device.\n   */\n  isTablet: boolean;\n\n  /**\n   * Boolean if currently matching a desktop screen by comparing the max width\n   * of the device.\n   */\n  isDesktop: boolean;\n\n  /**\n   * Boolean if currently matching a large desktop screen by comparing the max\n   * width of the device.\n   */\n  isLargeDesktop: boolean;\n\n  /**\n   * Boolean if the app is considered to be in landscape mode. This will just\n   * verify that the window width is greater than the window height.\n   *\n   * NOTE: This might not be super accurate on Android devices since the soft\n   * keyboard will change the dimensions of the viewport when it appears. It is\n   * recommended to use the `useOrientation` hook as well if you'd like to get\n   * the current orientation type.\n   */\n  isLandscape: boolean;\n}\n\nexport const DEFAULT_APP_SIZE: AppSize = {\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n};\n"],"names":["DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_APP_SIZE_QUERIES","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","DEFAULT_APP_SIZE","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape"],"mappings":"AAEA,8BAA8B,GAC9B,OAAO,MAAMA,0BAA0B,GAAG,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE3E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,GAAG,MAAM,GAAG,EAAE,CAAC,CAAqB;AAE5E,yBAAyB,GACzB,OAAO,MAAMC,2BAA2B,GAAG,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE7E,8BAA8B,GAC9B,OAAO,MAAMC,4BAA4B,GAAG,OAAO,GAAG,EAAE,CAAC,CAAqB;AAE9E,yBAAyB,GACzB,OAAO,MAAMC,kCAAkC,GAC7C,OAAO,GACR,EAAE,CAAC,CAAqB;AA+CzB,OAAO,MAAMC,2BAAqD;IAChEC,eAAeN;IACfO,gBAAgBN;IAChBO,gBAAgBN;IAChBO,iBAAiBN;IACjBO,sBAAsBN;AACxB,EAAE;AA2CF,OAAO,MAAMO,mBAA4B;IACvCC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf,EAAE"}

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

@@ -1,9 +1,8 @@
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useMediaQuery } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useMediaQuery } from "@react-md/core/media-queries/useMediaQuery";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const matches = useMediaQuery("screen and (min-width: 768px)");
@@ -14,8 +13,8 @@
  *
  * @param query - The media query to use
  * @param disabled - When `true`, the `window.matchMedia` API will not be
- * activated and the hook will always return `false`.
+ * activated and the hook will return the last cached value.
  * @returns `true` if the media query matches
- * @remarks \@since 6.0.0
+ * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.
  */
 export declare function useMediaQuery(query: string, disabled?: boolean): boolean;

package/dist/media-queries/useMediaQuery.js

@@ -2,11 +2,10 @@
 import { useEffect, useState } from "react";
 import { useSsr } from "../SsrProvider.js";
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { useMediaQuery } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useMediaQuery } from "@react-md/core/media-queries/useMediaQuery";
+ * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const matches = useMediaQuery("screen and (min-width: 768px)");
@@ -17,9 +16,9 @@ import { useSsr } from "../SsrProvider.js";
  *
  * @param query - The media query to use
  * @param disabled - When `true`, the `window.matchMedia` API will not be
- * activated and the hook will always return `false`.
+ * activated and the hook will return the last cached value.
  * @returns `true` if the media query matches
- * @remarks \@since 6.0.0
+ * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.
  */ export function useMediaQuery(query, disabled = false) {
     const ssr = useSsr();
     const [matches, setMatches] = useState(()=>{
@@ -34,7 +33,9 @@ import { useSsr } from "../SsrProvider.js";
         }
         const result = window.matchMedia(query);
         setMatches(result.matches);
-        const updater = ({ matches })=>setMatches(matches);
+        const updater = ({ matches })=>{
+            setMatches(matches);
+        };
         result.addEventListener("change", updater);
         return ()=>{
             result.removeEventListener("change", updater);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/useMediaQuery.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useMediaQuery } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const matches = useMediaQuery(\"screen and (min-width: 768px)\");\n *\n *   return <>{matches ? \"Matches\" : \"Doesn't\"}</>;\n * }\n * ```\n *\n * @param query - The media query to use\n * @param disabled - When `true`, the `window.matchMedia` API will not be\n * activated and the hook will always return `false`.\n * @returns `true` if the media query matches\n * @remarks \\@since 6.0.0\n */\nexport function useMediaQuery(query: string, disabled = false): boolean {\n  const ssr = useSsr();\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\" || disabled || ssr) {\n      return false;\n    }\n\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (disabled || ssr) {\n      return;\n    }\n\n    const result = window.matchMedia(query);\n    setMatches(result.matches);\n\n    const updater = ({ matches }: MediaQueryListEvent): void =>\n      setMatches(matches);\n\n    result.addEventListener(\"change\", updater);\n    return () => {\n      result.removeEventListener(\"change\", updater);\n    };\n  }, [disabled, query, ssr]);\n\n  return matches;\n}\n"],"names":["useEffect","useState","useSsr","useMediaQuery","query","disabled","ssr","matches","setMatches","window","matchMedia","result","updater","addEventListener","removeEventListener"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,MAAM,QAAQ,oBAAoB;AAE3C;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,cAAcC,KAAa,EAAEC,WAAW,KAAK;IAC3D,MAAMC,MAAMJ;IACZ,MAAM,CAACK,SAASC,WAAW,GAAGP,SAAS;QACrC,IAAI,OAAOQ,WAAW,eAAeJ,YAAYC,KAAK;YACpD,OAAO;QACT;QAEA,OAAOG,OAAOC,UAAU,CAACN,OAAOG,OAAO;IACzC;IAEAP,UAAU;QACR,IAAIK,YAAYC,KAAK;YACnB;QACF;QAEA,MAAMK,SAASF,OAAOC,UAAU,CAACN;QACjCI,WAAWG,OAAOJ,OAAO;QAEzB,MAAMK,UAAU,CAAC,EAAEL,OAAO,EAAuB,GAC/CC,WAAWD;QAEbI,OAAOE,gBAAgB,CAAC,UAAUD;QAClC,OAAO;YACLD,OAAOG,mBAAmB,CAAC,UAAUF;QACvC;IACF,GAAG;QAACP;QAAUD;QAAOE;KAAI;IAEzB,OAAOC;AACT"}
+{"version":3,"sources":["../../src/media-queries/useMediaQuery.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useMediaQuery } from \"@react-md/core/media-queries/useMediaQuery\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const matches = useMediaQuery(\"screen and (min-width: 768px)\");\n *\n *   return <>{matches ? \"Matches\" : \"Doesn't\"}</>;\n * }\n * ```\n *\n * @param query - The media query to use\n * @param disabled - When `true`, the `window.matchMedia` API will not be\n * activated and the hook will return the last cached value.\n * @returns `true` if the media query matches\n * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.\n */\nexport function useMediaQuery(query: string, disabled = false): boolean {\n  const ssr = useSsr();\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\" || disabled || ssr) {\n      return false;\n    }\n\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (disabled || ssr) {\n      return;\n    }\n\n    const result = window.matchMedia(query);\n    setMatches(result.matches);\n\n    const updater = ({ matches }: MediaQueryListEvent): void => {\n      setMatches(matches);\n    };\n\n    result.addEventListener(\"change\", updater);\n    return () => {\n      result.removeEventListener(\"change\", updater);\n    };\n  }, [disabled, query, ssr]);\n\n  return matches;\n}\n"],"names":["useEffect","useState","useSsr","useMediaQuery","query","disabled","ssr","matches","setMatches","window","matchMedia","result","updater","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,MAAM,QAAQ,oBAAoB;AAE3C;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,cAAcC,KAAa,EAAEC,WAAW,KAAK;IAC3D,MAAMC,MAAMJ;IACZ,MAAM,CAACK,SAASC,WAAW,GAAGP,SAAS;QACrC,IAAI,OAAOQ,WAAW,eAAeJ,YAAYC,KAAK;YACpD,OAAO;QACT;QAEA,OAAOG,OAAOC,UAAU,CAACN,OAAOG,OAAO;IACzC;IAEAP,UAAU;QACR,IAAIK,YAAYC,KAAK;YACnB;QACF;QAEA,MAAMK,SAASF,OAAOC,UAAU,CAACN;QACjCI,WAAWG,OAAOJ,OAAO;QAEzB,MAAMK,UAAU,CAAC,EAAEL,OAAO,EAAuB;YAC/CC,WAAWD;QACb;QAEAI,OAAOE,gBAAgB,CAAC,UAAUD;QAClC,OAAO;YACLD,OAAOG,mBAAmB,CAAC,UAAUF;QACvC;IACF,GAAG;QAACP;QAAUD;QAAOE;KAAI;IAEzB,OAAOC;AACT"}

package/dist/menu/DropdownMenu.d.ts

@@ -13,16 +13,15 @@ export interface DropdownMenuButtonProps extends MenuButtonProps, BaseDropdownMe
 export interface DropdownMenuItemButtonProps extends MenuItemButtonProps, BaseDropdownMenuProps {
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface DropdownMenuStateProps {
     visible: boolean;
     setVisible: UseStateSetter<boolean>;
 }
 /**
- * @remarks
- * \@since 5.0.0
- * \@since 6.0.0 Updated to use an `&` instead of `|` to allow autocompletion to
+ * @since 5.0.0
+ * @since 6.0.0 Updated to use an `&` instead of `|` to allow autocompletion to
  * work better by default. It's up to the user to make sure they don't provide
  * incorrect props.
  */
@@ -33,8 +32,7 @@ export type DropdownMenuProps = DropdownMenuButtonProps & DropdownMenuItemButton
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { DropdownMenu, MenuItem } from "@react-md/core";
@@ -53,8 +51,7 @@ export type DropdownMenuProps = DropdownMenuButtonProps & DropdownMenuItemButton
  * }
  * ```
  *
- * @example
- * Nested Dropdown Menus
+ * @example Nested Dropdown Menus
  * ```tsx
  * import type { ReactElement } from "react";
  * import { DropdownMenu, MenuItem } from "@react-md/core";
@@ -81,8 +78,7 @@ export type DropdownMenuProps = DropdownMenuButtonProps & DropdownMenuItemButton
  * }
  * ```
  *
- * @remarks
- * \@since 5.0.0
- * \@since 6.0.0 Updated to use the latest menu API.
+ * @since 5.0.0
+ * @since 6.0.0 Updated to use the latest menu API.
  */
 export declare function DropdownMenu(props: DropdownMenuProps): ReactElement;

package/dist/menu/DropdownMenu.js

@@ -14,8 +14,7 @@ import { useMenuBarContext } from "./useMenuBarProvider.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { DropdownMenu, MenuItem } from "@react-md/core";
@@ -34,8 +33,7 @@ import { useMenuBarContext } from "./useMenuBarProvider.js";
  * }
  * ```
  *
- * @example
- * Nested Dropdown Menus
+ * @example Nested Dropdown Menus
  * ```tsx
  * import type { ReactElement } from "react";
  * import { DropdownMenu, MenuItem } from "@react-md/core";
@@ -62,9 +60,8 @@ import { useMenuBarContext } from "./useMenuBarProvider.js";
  * }
  * ```
  *
- * @remarks
- * \@since 5.0.0
- * \@since 6.0.0 Updated to use the latest menu API.
+ * @since 5.0.0
+ * @since 6.0.0 Updated to use the latest menu API.
  */ export function DropdownMenu(props) {
     const { id: propId, horizontal, sheetHeader, sheetFooter, renderAsSheet, sheetPosition, sheetVerticalSize, buttonChildren, iconRotatorProps: propIconRotatorProps, disableTransition: propDisableTransition, floating, anchor, vwMargin, vhMargin, xMargin, yMargin, initialX, initialY, width, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, preventScroll, closeOnResize, closeOnScroll, getFixedPositionOptions, children, temporary, disablePortal, disableElevation, menuProps, menuStyle, menuClassName, sheetProps, sheetStyle, sheetClassName, visible: propVisible, setVisible: propSetVisible, ...remaining } = props;
     const fixedTo = useRef(null);