@react-md/core 6.3.3 → 6.4.0

package/dist/window-splitter/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-size\"?: string | number;\n    \"--rmd-window-splitter-background-size\"?: string | number;\n    \"--rmd-window-splitter-x\"?: string | number;\n    \"--rmd-window-splitter-y\"?: string | number;\n    \"--rmd-window-splitter-z\"?: string | number;\n    \"--rmd-window-splitter-position\"?: string | number;\n    \"--rmd-window-splitter-backgrond-color\"?: string;\n    \"--rmd-window-splitter-opacity\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions\n  extends BaseWindowSplitterClassNameOptions {\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOJ,IACLE,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ"}
+{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-size\"?: string | number;\n    \"--rmd-window-splitter-background-size\"?: string | number;\n    \"--rmd-window-splitter-x\"?: string | number;\n    \"--rmd-window-splitter-y\"?: string | number;\n    \"--rmd-window-splitter-z\"?: string | number;\n    \"--rmd-window-splitter-position\"?: string | number;\n    \"--rmd-window-splitter-backgrond-color\"?: string;\n    \"--rmd-window-splitter-inactive-backgrond-color\"?: string;\n    \"--rmd-window-splitter-opacity\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n\n  /**\n   * Set to `true` to enable a background-color to the `WindowSplitter` even\n   * while not being interacted with by the user.\n   *\n   * @since 6.4.0\n   * @defaultValue `false`\n   */\n  inactiveBackground?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    inactiveBackground,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n      \"no-inactive-bg\": !inactiveBackground,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","inactiveBackground","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkDnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClBC,SAAS,EACV,GAAGN;IAEJ,OAAOJ,IACLE,OAAO;QACLS,GAAG,CAACN;QACJO,IAAI,CAACP,YAAYE;QACjBM,GAAGR;QACHS,IAAIT,YAAYE;QAChBQ,GAAGP;QACHF;QACA,kBAAkB,CAACG;IACrB,IACAC;AAEJ"}

package/dist/window-splitter/useWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAuDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<\n  E extends HTMLElement = HTMLButtonElement,\n>\n  extends\n    Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAyDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.3.3",
+  "version": "6.4.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -78,44 +78,45 @@
     "remove-accents": "^0.5.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.52.13",
-    "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.13.20",
-    "@swc/jest": "^0.2.39",
+    "@jest/globals": "^30.2.0",
+    "@jest/types": "^30.2.0",
+    "@microsoft/api-extractor": "^7.55.1",
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.15.3",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^22.15.29",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "chokidar": "^4.0.3",
-    "eslint": "^9.36.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@types/lodash": "^4.17.21",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "chokidar": "^5.0.0",
+    "eslint": "^9.39.1",
     "filesize": "^11.0.13",
-    "glob": "11.0.3",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-watch-typeahead": "^2.2.2",
+    "glob": "13.0.0",
+    "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.6.2",
-    "stylelint": "^16.24.0",
-    "ts-morph": "^27.0.0",
+    "npm-run-all2": "^8.0.2",
+    "prettier": "^3.7.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stylelint": "^16.26.1",
+    "ts-morph": "^27.0.2",
     "ts-node": "^10.9.2",
-    "tsx": "^4.20.6",
-    "typescript": "^5.8.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4",
     "@react-md/eslint-config": "1.0.0",
     "@react-md/stylelint-config": "1.0.0"
   },
   "peerDependencies": {
-    "@jest/globals": ">= 29 <=30",
-    "@jest/types": ">= 29 <=30",
+    "@jest/globals": ">= 29 <=31",
+    "@jest/types": ">= 29 <=31",
     "@testing-library/dom": ">= 9",
     "@testing-library/jest-dom": ">= 6",
     "@testing-library/react": ">= 14",
@@ -157,8 +158,8 @@
     "access": "public"
   },
   "volta": {
-    "node": "22.13.1",
-    "pnpm": "10.8.0"
+    "node": "24.11.1",
+    "pnpm": "10.24.0"
   },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",
@@ -176,9 +177,16 @@
     "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
+    "check-format": "prettier --check .",
+    "format": "prettier --write .",
     "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",
     "lint-styles": "stylelint \"src/**/*.{css,scss}\"",
     "lint": "npm-run-all lint-scripts lint-styles",
-    "test": "NODE_OPTIONS=--experimental-vm-modules NODE_NO_WARNINGS=1 jest"
+    "lint-fix": "npm-run-all \"lint-scripts --fix\" \"lint-styles --fix\"",
+    "test": "vitest",
+    "test-run": "vitest run",
+    "test-coverage": "vitest --coverage",
+    "test-run-coverage": "pnpm test-run --coverage",
+    "test-run-snapshot": "pnpm test-run -u"
   }
 }

package/src/CoreProviders.tsx

@@ -46,6 +46,7 @@ export interface ReactMDCoreConfiguration {
   /**
    * @defaultValue `DEFAULT_APP_SIZE_QUERIES`
    * @see {@link DEFAULT_APP_SIZE_QUERIES}
+   * @deprecated Update the `MEDIA_QUERY_CONFIG` instead
    */
   appSizeQueries?: Readonly<AppSizeQueries>;
 

package/src/app-bar/AppBar.tsx

@@ -27,8 +27,7 @@ export type CustomAppBarComponent = ElementType<
  * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
  */
 export interface AppBarProps
-  extends HTMLAttributes<HTMLDivElement>,
-    AppBarClassNameOptions {
+  extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
   /** @defaultValue `fixed ? "header" : "div"` */
   as?: CustomAppBarComponent;
 }

package/src/app-bar/AppBarTitle.tsx

@@ -13,8 +13,7 @@ import { type AppBarTitleClassNameOptions, appBarTitle } from "./styles.js";
  * will default to `"ellipsis"` which is new as well.
  */
 export interface AppBarTitleProps
-  extends TypographyProps,
-    AppBarTitleClassNameOptions {
+  extends TypographyProps, AppBarTitleClassNameOptions {
   /** @defaultValue `"headline-6"` */
   type?: TypographyType;
 

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -16,7 +16,9 @@ import {
  */
 export interface AutocompleteListboxChildrenProps<
   Option extends AutocompleteOption,
-> extends Required<AutocompleteGetOptionProps<Option>>,
+>
+  extends
+    Required<AutocompleteGetOptionProps<Option>>,
     Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
   options: readonly Option[];

package/src/autocomplete/types.ts

@@ -301,8 +301,9 @@ export type AutocompleteOptionLabelExtractor<
 /**
  * @since 6.0.0
  */
-export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
-  extends AutocompleteGetOptionLabel<Option> {
+export interface AutocompleteFilteringOptions<
+  Option extends AutocompleteOption,
+> extends AutocompleteGetOptionLabel<Option> {
   /**
    * The list of options that can be shown within the autocomplete and filtered
    * based on the current query.
@@ -390,7 +391,9 @@ export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
  */
 export interface AutocompleteFilterAndListboxOptions<
   Option extends AutocompleteOption,
-> extends AutocompleteFilteringOptions<Option>,
+>
+  extends
+    AutocompleteFilteringOptions<Option>,
     AutocompleteGetOptionProps<Option>,
     OptionSelectedIconProps {
   /**
@@ -429,7 +432,9 @@ export interface AutocompleteEditableComboboxOptions<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends EditableComboboxOptions<ComboboxEl, PopupEl>,
+>
+  extends
+    EditableComboboxOptions<ComboboxEl, PopupEl>,
     AutocompleteFilterAndListboxOptions<Option> {
   onBlur?: FocusEventHandler<ComboboxEl>;
   onChange?: ChangeEventHandler<ComboboxEl>;
@@ -481,7 +486,9 @@ export interface AutocompleteOptions<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,
+>
+  extends
+    AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,
     AutocompleteUnknownQueryAndValueOptions<Option> {}
 
 /**
@@ -502,8 +509,8 @@ export interface AutocompleteComboboxProps<
 export interface AutocompleteListboxProps<
   T extends AutocompleteOption = AutocompleteOption,
   PopupEl extends HTMLElement = HTMLElement,
-> extends Omit<ComboboxMenuProps<PopupEl>, "ref">,
-    OptionSelectedIconProps {
+>
+  extends Omit<ComboboxMenuProps<PopupEl>, "ref">, OptionSelectedIconProps {
   value: T | null | readonly T[];
   setValue: Dispatch<T>;
   onEnter: (appearing: boolean) => void;
@@ -513,8 +520,7 @@ export interface AutocompleteListboxProps<
  * @since 6.0.0
  */
 export interface ConfigurableAutocompleteListboxProps
-  extends ConfigurableComboboxMenuProps,
-    OptionSelectedIconProps {
+  extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {
   id?: string;
 }
 
@@ -550,16 +556,14 @@ export interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {
  * @internal
  * @since 6.0.0
  */
-export interface AutocompleteClearButtonProps
-  extends ConfigurableAutocompleteClearButtonProps {
+export interface AutocompleteClearButtonProps extends ConfigurableAutocompleteClearButtonProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
  * @since 6.0.0
  */
-export interface ConfigurableAutocompleteDropdownButtonProps
-  extends ButtonProps {
+export interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {
   /** @defaultValue `AutocompleteProps.listboxLabel` */
   "aria-label"?: string;
   /** @defaultValue `AutocompleteProps.listboxLabelledby` */
@@ -576,8 +580,7 @@ export interface ConfigurableAutocompleteDropdownButtonProps
 /**
  * @since 6.0.0
  */
-export interface AutocompleteDropdownButtonProps
-  extends ConfigurableAutocompleteDropdownButtonProps {
+export interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {
   "aria-controls": string;
   onClick: MouseEventHandler<HTMLButtonElement>;
   visible: boolean;
@@ -586,8 +589,7 @@ export interface AutocompleteDropdownButtonProps
 /**
  * @since 6.0.0
  */
-export interface AutocompleteCircularProgressProps
-  extends CircularProgressProps {
+export interface AutocompleteCircularProgressProps extends CircularProgressProps {
   /** @defaultValue `"Loading"` */
   "aria-label"?: string;
 
@@ -616,7 +618,9 @@ export interface AutocompleteWithQueryImplementation<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,
+>
+  extends
+    EditableComboboxImplementation<ComboboxEl, PopupEl>,
     Required<AutocompleteGetOptionProps<Option>>,
     Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
@@ -700,7 +704,8 @@ export interface AutocompleteImplementation<
  * @since 6.0.0
  */
 export interface AutocompleteBaseProps<Option extends AutocompleteOption>
-  extends Omit<TextFieldProps, "value" | "defaultValue">,
+  extends
+    Omit<TextFieldProps, "value" | "defaultValue">,
     AutocompleteFilterAndListboxOptions<Option>,
     ComboboxVisibilityOptions {
   inputRef?: Ref<HTMLInputElement>;

package/src/autocomplete/utils.ts

@@ -16,8 +16,9 @@ import {
  * @since 6.0.0
  * @internal
  */
-export interface GetDefaultValueOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+export interface GetDefaultValueOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   query: string | undefined;
   multiselect?: boolean;
   defaultQuery: UseStateInitializer<string> | undefined;
@@ -86,8 +87,9 @@ export function getDefaultValue<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-interface GetDefaultQueryOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+interface GetDefaultQueryOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | null | readonly Option[];
   defaultQuery?: UseStateInitializer<string>;
 }
@@ -122,8 +124,9 @@ export function getDefaultQuery<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-export interface EnforceSelectedValueOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+export interface EnforceSelectedValueOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | readonly Option[] | null;
   visible: boolean;
   container: HTMLElement | null;

package/src/avatar/Avatar.tsx

@@ -15,7 +15,8 @@ export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
  * the `role="presentation"`.
  */
 export interface AvatarProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
   /**
    * Since avatars are normally presentational data, they are hidden from screen

package/src/box/styles.ts

@@ -254,6 +254,20 @@ export interface BoxOptions {
 }
 
 /**
+ * Applies the `className` from the `Box` component to any element.
+ *
+ * @example Simple Example
+ * ```tsx
+ * return (
+ *   <form className={box({ stacked: true})}>
+ *     {children}
+ *   </form>
+ * );
+ * ```
+ *
+ * If custom media query breakpoints are required, use the {@link boxStyles}
+ * function instead which will also set the CSS variables.
+ *
  * @see {@link boxStyles}
  * @since 6.0.0
  */
@@ -442,6 +456,31 @@ export interface BoxStylesOptions extends BoxOptions {
 }
 
 /**
+ * Used to apply the styles from the `Box` component to any element by
+ * providing a `style` object with CSS variables and a `className`.
+ *
+ * If you do not need to  use
+ *
+ * @example Simple Example
+ * ```tsx
+ * return (
+ *   <form
+ *     {...boxStyles({
+ *        grid: true,
+ *        gridColumns: {
+ *          phone: 1,
+ *          desktop: 3,
+ *        },
+ *        gridItemSize:  {
+ *          tablet: "12rem",
+ *        },
+ *     })}
+ *   >
+ *     {children}
+ *   </form>
+ * );
+ * ```
+ *
  * @see {@link box}
  * @since 6.0.0
  */

package/src/button/Button.tsx

@@ -14,7 +14,8 @@ import {
 import { type ButtonClassNameThemeOptions, button } from "./styles.js";
 
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     ButtonClassNameThemeOptions,
     ComponentWithRippleProps {
   /** @defaultValue `"button"` */

package/src/button/FloatingActionButton.tsx

@@ -62,7 +62,8 @@ export function fab(options: FloatingActionButtonClassNameOptions): string {
 
 /** @since 6.0.0 */
 export interface FloatingActionButtonProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     FloatingActionButtonClassNameOptions {}
 
 /**

package/src/card/Card.tsx

@@ -9,7 +9,8 @@ import { type CardClassNameOptions, card } from "./styles.js";
  * deprecated `raiseable` prop
  */
 export interface CardProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     CardClassNameOptions,
     Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
   /** @defaultValue `"stretch"` */

package/src/card/CardContent.tsx

@@ -7,8 +7,7 @@ import { type CardContentClassNameOptions, cardContent } from "./styles.js";
  * removed the `disableParagraphMargin` prop.
  */
 export interface CardContentProps
-  extends HTMLAttributes<HTMLDivElement>,
-    CardContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}
 
 /**
  * @see {@link https://react-md.dev/components/card | Card Demos}

package/src/card/ClickableCard.tsx

@@ -16,8 +16,7 @@ const noop = (): void => {
  * @since 6.0.0
  */
 export interface ClickableCardProps
-  extends CardProps,
-    ComponentWithRippleProps {
+  extends CardProps, ComponentWithRippleProps {
   onClick: MouseEventHandler<HTMLDivElement>;
 
   /**

package/src/chip/Chip.tsx

@@ -28,7 +28,8 @@ import { type ChipTheme, chip, chipContent } from "./styles.js";
  * augmentation.
  */
 export interface ChipProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     BaseMaxWidthTransitionOptions,
     ComponentWithRippleProps {
   /**

package/src/datetime/NativeDateField.tsx

@@ -7,7 +7,8 @@ import { type DateFieldOptions, useDateField } from "./useDateField.js";
 
 /** @since 6.3.0 */
 export interface NativeDateFieldProps
-  extends Omit<TextFieldProps, keyof DateFieldOptions | "value">,
+  extends
+    Omit<TextFieldProps, keyof DateFieldOptions | "value">,
     Omit<DateFieldOptions, "ref"> {}
 
 /**

package/src/datetime/NativeTimeField.tsx

@@ -9,7 +9,8 @@ import { type TimeFieldOptions, useTimeField } from "./useTimeField.js";
  * @since 6.3.0
  */
 export interface NativeTimeFieldProps
-  extends Omit<TextFieldProps, keyof TimeFieldOptions | "value">,
+  extends
+    Omit<TextFieldProps, keyof TimeFieldOptions | "value">,
     Omit<TimeFieldOptions, "ref"> {}
 
 /**

package/src/datetime/useDateField.ts

@@ -42,7 +42,8 @@ export interface DateFieldConstraints {
 
 /** @since 6.3.0 */
 export interface DateFieldOptions
-  extends Omit<
+  extends
+    Omit<
       TextFieldHookOptions,
       | "isNumber"
       | "counter"
@@ -55,7 +56,8 @@ export interface DateFieldOptions
 
 /** @since 6.3.0 */
 export interface ProvidedDateFieldProps
-  extends Omit<ProvidedTextFieldProps, "value">,
+  extends
+    Omit<ProvidedTextFieldProps, "value">,
     Omit<DateFieldConstraints, "step"> {
   type: "date";
   step?: number | "any";
@@ -72,20 +74,23 @@ export interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {
 }
 
 /** @since 6.3.0 */
-export interface DateFieldImplementation
-  extends Omit<TextFieldImplementation, "fieldProps"> {
+export interface DateFieldImplementation extends Omit<
+  TextFieldImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedDateFieldProps;
 }
 
 /** @since 6.3.0 */
-export interface DateFieldWithMessageImplementation
-  extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+export interface DateFieldWithMessageImplementation extends Omit<
+  TextFieldWithMessageImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedDateFieldMessageProps;
 }
 
 /** @since 6.3.0 */
-export interface ValidatedDateFieldImplementation
-  extends DateFieldImplementation {
+export interface ValidatedDateFieldImplementation extends DateFieldImplementation {
   fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;
 }
 

package/src/datetime/useTimeField.ts

@@ -69,7 +69,8 @@ export interface TimeFieldConstraints {
 
 /** @since 6.3.0 */
 export interface TimeFieldOptions
-  extends Omit<
+  extends
+    Omit<
       TextFieldHookOptions,
       | "isNumber"
       | "counter"
@@ -82,7 +83,8 @@ export interface TimeFieldOptions
 
 /** @since 6.3.0 */
 export interface ProvidedTimeFieldProps
-  extends Omit<ProvidedTextFieldProps, "value">,
+  extends
+    Omit<ProvidedTextFieldProps, "value">,
     Omit<TimeFieldConstraints, "step"> {
   type: "time";
   step?: number | "any";
@@ -99,20 +101,23 @@ export interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {
 }
 
 /** @since 6.3.0 */
-export interface TimeFieldImplementation
-  extends Omit<TextFieldImplementation, "fieldProps"> {
+export interface TimeFieldImplementation extends Omit<
+  TextFieldImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedTimeFieldProps;
 }
 
 /** @since 6.3.0 */
-export interface TimeFieldWithMessageImplementation
-  extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+export interface TimeFieldWithMessageImplementation extends Omit<
+  TextFieldWithMessageImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedTimeFieldMessageProps;
 }
 
 /** @since 6.3.0 */
-export interface ValidatedTimeFieldImplementation
-  extends TimeFieldImplementation {
+export interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {
   fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;
 }
 

package/src/dialog/Dialog.tsx

@@ -42,7 +42,8 @@ const noop = (): void => {
 const noopBool = (): boolean => false;
 
 export interface BaseDialogProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     CSSTransitionComponentProps,
     TransitionActions,
     FocusContainerComponentProps {

package/src/dialog/DialogContainer.tsx

@@ -5,8 +5,7 @@ import { dialogContainer } from "./styles.js";
 /**
  * @since 6.0.0
  */
-export interface ConfigurableDialogContainerProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ConfigurableDialogContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Set to `true` to force the `Dialog` to be wrapped in a `DialogContainer`
    * div. This defaults to `true` for `type !== "custom"`.

package/src/dialog/DialogContent.tsx

@@ -3,8 +3,7 @@ import { type HTMLAttributes, forwardRef } from "react";
 import { type DialogContentClassNameOptions, dialogContent } from "./styles.js";
 
 export interface DialogContentProps
-  extends HTMLAttributes<HTMLDivElement>,
-    DialogContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogContentClassNameOptions {}
 
 /**
  * The `DialogContent` component should be used as a child of the `Dialog`

package/src/dialog/DialogFooter.tsx

@@ -3,8 +3,7 @@ import { type HTMLAttributes, forwardRef } from "react";
 import { type DialogFooterClassNameOptions, dialogFooter } from "./styles.js";
 
 export interface DialogFooterProps
-  extends HTMLAttributes<HTMLDivElement>,
-    DialogFooterClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogFooterClassNameOptions {}
 
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles