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

package/dist/utils/wait.d.ts

@@ -1,11 +1,11 @@
 /**
  * @example Wait some duration
  * ```ts
- * import { wait } from "@react-md/core";
+ * import { wait } from "@react-md/core/utils/wait";
  *
- * console.log('start');
+ * console.log("start");
  * await wait(5000);
- * console.log('it has been five seconds');
+ * console.log("it has been five seconds");
  * ```
  *
  * This util was just added to support random waits for mocking data and random
@@ -13,4 +13,4 @@
  *
  * @since 6.0.0
  */
-export declare const wait: (ms: number) => Promise<void>;
+export declare function wait(ms: number): Promise<void>;

package/dist/utils/wait.js

@@ -1,19 +1,21 @@
 /**
  * @example Wait some duration
  * ```ts
- * import { wait } from "@react-md/core";
+ * import { wait } from "@react-md/core/utils/wait";
  *
- * console.log('start');
+ * console.log("start");
  * await wait(5000);
- * console.log('it has been five seconds');
+ * console.log("it has been five seconds");
  * ```
  *
  * This util was just added to support random waits for mocking data and random
  * throttling.
  *
  * @since 6.0.0
- */ export const wait = (ms)=>new Promise((resolve)=>setTimeout(()=>{
+ */ export function wait(ms) {
+    return new Promise((resolve)=>setTimeout(()=>{
             resolve();
         }, ms));
+}
 
 //# sourceMappingURL=wait.js.map

package/dist/utils/wait.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/wait.ts"],"sourcesContent":["/**\n * @example Wait some duration\n * ```ts\n * import { wait } from \"@react-md/core\";\n *\n * console.log('start');\n * await wait(5000);\n * console.log('it has been five seconds');\n * ```\n *\n * This util was just added to support random waits for mocking data and random\n * throttling.\n *\n * @since 6.0.0\n */\nexport const wait = (ms: number): Promise<void> =>\n  new Promise((resolve) =>\n    setTimeout(() => {\n      resolve();\n    }, ms)\n  );\n"],"names":["wait","ms","Promise","resolve","setTimeout"],"mappings":"AAAA;;;;;;;;;;;;;;CAcC,GACD,OAAO,MAAMA,OAAO,CAACC,KACnB,IAAIC,QAAQ,CAACC,UACXC,WAAW;YACTD;QACF,GAAGF,KACH"}
+{"version":3,"sources":["../../src/utils/wait.ts"],"sourcesContent":["/**\n * @example Wait some duration\n * ```ts\n * import { wait } from \"@react-md/core/utils/wait\";\n *\n * console.log(\"start\");\n * await wait(5000);\n * console.log(\"it has been five seconds\");\n * ```\n *\n * This util was just added to support random waits for mocking data and random\n * throttling.\n *\n * @since 6.0.0\n */\nexport function wait(ms: number): Promise<void> {\n  return new Promise((resolve) =>\n    setTimeout(() => {\n      resolve();\n    }, ms)\n  );\n}\n"],"names":["wait","ms","Promise","resolve","setTimeout"],"mappings":"AAAA;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASA,KAAKC,EAAU;IAC7B,OAAO,IAAIC,QAAQ,CAACC,UAClBC,WAAW;YACTD;QACF,GAAGF;AAEP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { windowSplitter } from \"./styles.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\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 */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed = false,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","remaining","vertical","button","type"],"mappings":";AAAA,SAASA,UAAU,QAAmC,QAAQ;AAE9D,SAASC,cAAc,QAAQ,cAAc;AAwC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGC,WACJ,GAAGP;IACJ,MAAMQ,WAAWR,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACS;QACE,GAAGF,SAAS;QACbN,KAAKA;QACLS,MAAK;QACLR,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAI;YACAF;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { windowSplitter } from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\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 */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed = false,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,cAAc,QAAQ,cAAc;AAuC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGC,WACJ,GAAGP;IACJ,MAAMQ,WAAWR,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACS;QACE,GAAGF,SAAS;QACbN,KAAKA;QACLS,MAAK;QACLR,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAI;YACAF;QACF;;AAGN,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterClassNameOptions {\n  className?: string;\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n  disableFixed?: 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;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;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\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterClassNameOptions {\n  className?: string;\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n  disableFixed?: 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;AAanB;;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"}

package/dist/window-splitter/useWindowSplitter.d.ts

@@ -55,7 +55,10 @@ export interface WindowSplitterImplementation<E extends HTMLElement = HTMLButton
  *
  * @example Custom Implementation
  * ```tsx
- * import { useWindowSplitter, WindowSplitterImplementation } from "@react-md/core";
+ * import {
+ *   useWindowSplitter,
+ *   type WindowSplitterImplementation
+ * } from "@react-md/core/window-splitter/useWindowSplitter";
  * import { useState } from "react";
  *
  * // this is pretty much the `useWindowSplitter` implementation

package/dist/window-splitter/useWindowSplitter.js

@@ -6,7 +6,10 @@ import { useEnsuredId } from "../useEnsuredId.js";
  *
  * @example Custom Implementation
  * ```tsx
- * import { useWindowSplitter, WindowSplitterImplementation } from "@react-md/core";
+ * import {
+ *   useWindowSplitter,
+ *   type WindowSplitterImplementation
+ * } from "@react-md/core/window-splitter/useWindowSplitter";
  * import { useState } from "react";
  *
  * // this is pretty much the `useWindowSplitter` implementation

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type Ref, type RefCallback } from \"react\";\nimport {\n  useDraggable,\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\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<E extends HTMLElement>\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 { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\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;AAEA,SACEA,YAAY,QAOP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,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\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\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<E extends HTMLElement>\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;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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": "1.0.0-next.19",
+  "version": "1.0.0-next.20",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -16,11 +16,9 @@
       "require": "./dist/test-utils/polyfills/*",
       "default": "./dist/test-utils/polyfills/*.js"
     },
+    "./test-utils/jest-globals": "./dist/test-utils/jest-globals/index.js",
+    "./test-utils/vitest": "./dist/test-utils/vitest/index.js",
     "./test-utils": "./dist/test-utils/index.js",
-    "./test-utils/*": {
-      "require": "./dist/test-utils/*",
-      "default": "./dist/test-utils/*.js"
-    },
     "./colors": {
       "sass": "./dist/_colors.scss",
       "default": "./dist/theme/colors.js"
@@ -58,41 +56,43 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.49.1",
+    "@microsoft/api-extractor": "^7.49.2",
     "@mlaursen/eslint-config": "^6.0.0",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.10.4",
+    "@swc/core": "^1.10.15",
     "@swc/jest": "^0.2.37",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/lodash": "^4.17.14",
-    "@types/node": "^22.10.5",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^22.13.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.17.0",
+    "eslint": "^9.20.0",
     "filesize": "^10.1.6",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.4.2",
-    "stylelint": "^16.12.0",
+    "prettier": "^3.5.0",
+    "stylelint": "^16.14.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.10.0",
-    "ts-morph": "^25.0.0",
+    "stylelint-scss": "^6.11.0",
+    "ts-morph": "^25.0.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",
@@ -102,7 +102,8 @@
     "@testing-library/react": ">= 14",
     "@testing-library/user-event": ">= 14",
     "react": ">= 18",
-    "react-dom": ">= 18"
+    "react-dom": ">= 18",
+    "vitest": ">= 2"
   },
   "peerDependenciesMeta": {
     "@jest/globals": {
@@ -128,14 +129,17 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "vitest": {
+      "optional": true
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "volta": {
-    "node": "20.12.2",
-    "pnpm": "9.14.1"
+    "node": "22.13.1",
+    "pnpm": "10.2.1"
   },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",

package/src/CoreProviders.tsx

@@ -1,27 +1,29 @@
 "use client";
+
 import { type ReactElement, type ReactNode } from "react";
+
 import { SsrProvider } from "./SsrProvider.js";
 import { UserInteractionModeProvider } from "./interaction/UserInteractionModeProvider.js";
 import { AppSizeProvider } from "./media-queries/AppSizeProvider.js";
 import {
-  DEFAULT_APP_SIZE,
-  DEFAULT_APP_SIZE_QUERIES,
   type AppSize,
   type AppSizeQueries,
+  DEFAULT_APP_SIZE,
+  DEFAULT_APP_SIZE_QUERIES,
 } from "./media-queries/appSize.js";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { type MenuConfigurationProvider } from "./menu/MenuConfigurationProvider.js";
 import {
-  PortalContainerProvider,
   type PortalContainer,
+  PortalContainerProvider,
 } from "./portal/PortalContainerProvider.js";
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { type MenuConfigurationProvider } from "./menu/MenuConfigurationProvider.js";
 import { type Snackbar } from "./snackbar/Snackbar.js";
 import { type LocalStorageColorSchemeProvider } from "./theme/LocalStorageColorSchemeProvider.js";
 import { type ThemeProvider } from "./theme/ThemeProvider.js";
 import { type useColorSchemeProvider } from "./theme/useColorSchemeProvider.js";
 import { type TooltipHoverModeProvider } from "./tooltip/TooltipHoverModeProvider.js";
 import { type WritingDirectionProvider } from "./typography/WritingDirectionProvider.js";
+
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
 /** @since 6.0.0 */

package/src/NoSsr.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { useEffect, useState, type ReactElement, type ReactNode } from "react";
+
+import { type ReactElement, type ReactNode, useEffect, useState } from "react";
+
 import { useSsr } from "./SsrProvider.js";
 
 /** @since 6.0.0 */

package/src/RootHtml.tsx

@@ -4,6 +4,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+
 import { type PropsWithRef } from "./types.js";
 
 /**

package/src/SsrProvider.tsx

@@ -1,11 +1,12 @@
 "use client";
+
 import {
+  type ReactElement,
+  type ReactNode,
   createContext,
   useContext,
   useEffect,
   useState,
-  type ReactElement,
-  type ReactNode,
 } from "react";
 
 const context = createContext(false);

package/src/app-bar/AppBar.tsx

@@ -1,10 +1,11 @@
 import {
-  forwardRef,
   type ElementType,
   type HTMLAttributes,
   type Ref,
+  forwardRef,
 } from "react";
-import { appBar, type AppBarClassNameOptions } from "./styles.js";
+
+import { type AppBarClassNameOptions, appBar } from "./styles.js";
 
 /** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<

package/src/app-bar/AppBarTitle.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import { type TextOverflow } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";

package/src/app-bar/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { type BoxOptions, box } from "../box/styles.js";
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { type CssPosition } from "../types.js";

package/src/autocomplete/Autocomplete.tsx

@@ -1,5 +1,7 @@
 "use client";
+
 import { type ReactElement } from "react";
+
 import { Listbox } from "../form/Listbox.js";
 import { TextField } from "../form/TextField.js";
 import { ListSubheader } from "../list/ListSubheader.js";

package/src/autocomplete/AutocompleteChip.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
+
 import { Chip } from "../chip/Chip.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { autocompleteChip } from "./autocompleteStyles.js";
 import { type AutocompleteChipProps } from "./types.js";
 

package/src/autocomplete/AutocompleteCircularProgress.tsx

@@ -1,4 +1,5 @@
 import { type ReactElement } from "react";
+
 import { CircularProgress } from "../progress/CircularProgress.js";
 import { type AutocompleteCircularProgressProps } from "./types.js";
 

package/src/autocomplete/AutocompleteClearButton.tsx

@@ -1,7 +1,9 @@
 "use client";
+
 import { type ReactElement } from "react";
+
 import { Button } from "../button/Button.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { autocompleteClearButton } from "./autocompleteStyles.js";
 import { type AutocompleteClearButtonProps } from "./types.js";

package/src/autocomplete/AutocompleteDropdownButton.tsx

@@ -1,8 +1,10 @@
 "use client";
+
 import { type ReactElement } from "react";
+
 import { Button } from "../button/Button.js";
 import { IconRotator } from "../icon/IconRotator.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { autocompleteDropdownButton } from "./autocompleteStyles.js";

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -1,5 +1,7 @@
 "use client";
+
 import { type ReactElement, type ReactNode } from "react";
+
 import { useListboxContext } from "../form/ListboxProvider.js";
 import { Option } from "../form/Option.js";
 import {

package/src/autocomplete/autocompleteStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 

package/src/autocomplete/types.ts

@@ -7,6 +7,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
+
 import { type ButtonProps } from "../button/Button.js";
 import { type ChipProps } from "../chip/Chip.js";
 import {

package/src/autocomplete/useAutocomplete.ts

@@ -1,11 +1,13 @@
 "use client";
+
 import { useCallback, useMemo, useRef } from "react";
+
 import { useEditableCombobox } from "../form/useEditableCombobox.js";
 import {
-  triggerManualChangeEvent,
   type EditableHTMLElement,
+  triggerManualChangeEvent,
 } from "../form/utils.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { TRANSITION_CONFIG } from "../transition/config.js";
 import { type TransitionEnterHandler } from "../transition/types.js";

package/src/autocomplete/utils.ts

@@ -1,4 +1,5 @@
 import { type RefObject } from "react";
+
 import {
   type EditableHTMLElement,
   triggerManualChangeEvent,

package/src/avatar/Avatar.tsx

@@ -1,11 +1,12 @@
 import {
-  forwardRef,
   type HTMLAttributes,
   type ImgHTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type PropsWithRef } from "../types.js";
-import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";
+import { type AvatarClassNameOptions, avatar, avatarImage } from "./styles.js";
 
 declare module "react" {
   interface CSSProperties {

package/src/avatar/styles.ts

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { cssUtils, type ThemeColor } from "../cssUtils.js";
+
+import { type ThemeColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-avatar");

package/src/badge/Badge.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { badge, type BadgeTheme } from "./styles.js";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
+import { type BadgeTheme, badge } from "./styles.js";
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /** @defaultValue `"greyscale"` */

package/src/badge/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 

package/src/box/Box.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { box, type BoxOptions } from "./styles.js";
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type BoxOptions, box } from "./styles.js";
 
 /**
  * @since 6.0.0
@@ -117,6 +118,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       stacked,
       reversed,
       gridColumns,
+      gridAutoRows,
       fullWidth,
       disableGap,
       disableWrap,
@@ -144,6 +146,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
           stacked,
           gridName,
           gridColumns,
+          gridAutoRows,
           align,
           justify,
           reversed,

package/src/box/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-box");
@@ -108,6 +109,18 @@ export interface BoxOptions {
    */
   gridColumns?: "fit" | "fill" | number;
 
+  /**
+   * Set this to `true` to enable equal height rows within the grid based
+   * on the current `max-height`. This requires the `max-height` to be set
+   * on the `Box` either by:
+   *
+   * - a custom class name that sets `max-height`
+   * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element
+   *
+   * @defaultValue `false`
+   */
+  gridAutoRows?: boolean;
+
   /**
    * @defaultValue `""`
    */
@@ -149,6 +162,7 @@ export function box(options: BoxOptions = {}): string {
     grid,
     gridName = "",
     gridColumns = "fit",
+    gridAutoRows,
     justify = "",
     stacked,
     reversed,
@@ -168,8 +182,9 @@ export function box(options: BoxOptions = {}): string {
       "column-reverse": stacked && reversed,
       "full-width": fullWidth,
       grid,
-      "grid-fill": gridColumns === "fill",
-      "grid-columns": typeof gridColumns === "number",
+      "grid-fill": grid && gridColumns === "fill",
+      "grid-columns": grid && typeof gridColumns === "number",
+      "grid-auto-rows": grid && gridAutoRows,
       [gridName]: grid && gridName,
       "align-start": align === "start" || align === "flex-start",
       "align-center": align === "center",

package/src/button/AsyncButton.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { forwardRef, type MouseEvent, type ReactNode } from "react";
+import { type MouseEvent, type ReactNode, forwardRef } from "react";
+
 import { type BoxAlignItems } from "../box/styles.js";
 import { overlay } from "../overlay/overlayStyles.js";
 import {

package/src/button/Button.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
@@ -9,7 +11,7 @@ import {
   type FloatingActionButtonPosition,
   type FloatingActionButtonProps,
 } from "./FloatingActionButton.js";
-import { button, type ButtonClassNameThemeOptions } from "./buttonStyles.js";
+import { type ButtonClassNameThemeOptions, button } from "./buttonStyles.js";
 
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,

package/src/button/ButtonUnstyled.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
 import { buttonUnstyled } from "./buttonUnstyledStyles.js";
 
 /**

package/src/button/FloatingActionButton.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { bem } from "../utils/bem.js";
 
 declare module "react" {

package/src/button/TooltippedButton.tsx

@@ -1,11 +1,13 @@
 "use client";
-import { forwardRef, type ReactNode } from "react";
+
+import { type ReactNode, forwardRef } from "react";
+
 import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
 import {
-  useTooltip,
   type ProvidedTooltipProps,
   type TooltipOptions,
   type TooltippedElementEventHandlers,
+  useTooltip,
 } from "../tooltip/useTooltip.js";
 import { Button, type ButtonProps } from "./Button.js";
 import { type ButtonType } from "./buttonStyles.js";