@react-md/core 1.0.0-next.1 → 1.0.0-next.3

package/dist/useResizeObserver.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, RefCallback } from "react";
+import { type Ref, type RefCallback } from "react";
 /**
  * @remarks \@since 6.0.0
  */
@@ -98,48 +98,9 @@ export interface ResizeObserverHookOptions<E extends HTMLElement> {
     disableWidth?: boolean;
 }
 /**
- * @example
- * Simple Example
- * ```tsx
- * import { useResizeObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
- *
- * interface Size {
- *   height: number;
- *   width: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [{ height, width }, setSize] = useState<Size>({
- *     height: 0,
- *     width: 0,
- *   });
- *   const targetRef = useResizeObserver({
- *     onResize: useCallback((entry) => {
- *       const { height, width } = entry.borderBox;
- *       setSize({ height, width });
- *     }, []),
- *   });
- *
- *   return (
- *     <div ref={targetRef}>
- *       <table>
- *         <tbody>
- *           <tr>
- *             <th scope="col">Height:</th>
- *             <td>{height}</td>
- *           </tr>
- *           <tr>
- *             <th scope="col">Width:</th>
- *             <td>{width}</td>
- *           </tr>
- *         </tbody>
- *       </table>
- *     </div>
- *   );
- * }
- * ```
+ * The resize observer is used to track the size changes of a specific element.
+ * For most cases you can use the {@link useElementSize} instead, but this hook
+ * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
  * @remarks
  * \@since 2.3.0

package/dist/useResizeObserver.js

@@ -95,48 +95,9 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
  * @remarks \@since 6.0.0
  */ export const resizeObserverManager = new ResizeObserverManager();
 /**
- * @example
- * Simple Example
- * ```tsx
- * import { useResizeObserver } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
- *
- * interface Size {
- *   height: number;
- *   width: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [{ height, width }, setSize] = useState<Size>({
- *     height: 0,
- *     width: 0,
- *   });
- *   const targetRef = useResizeObserver({
- *     onResize: useCallback((entry) => {
- *       const { height, width } = entry.borderBox;
- *       setSize({ height, width });
- *     }, []),
- *   });
- *
- *   return (
- *     <div ref={targetRef}>
- *       <table>
- *         <tbody>
- *           <tr>
- *             <th scope="col">Height:</th>
- *             <td>{height}</td>
- *           </tr>
- *           <tr>
- *             <th scope="col">Width:</th>
- *             <td>{width}</td>
- *           </tr>
- *         </tbody>
- *       </table>
- *     </div>
- *   );
- * }
- * ```
+ * The resize observer is used to track the size changes of a specific element.
+ * For most cases you can use the {@link useElementSize} instead, but this hook
+ * can be used for more complex behavior with the {@link ResizeObserverEntry}.
  *
  * @remarks
  * \@since 2.3.0

package/dist/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useResizeObserver.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport { useEffect } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;\n\n/** @internal */\ntype Unsubscribe = () => void;\n\n/** @internal */\ninterface TargetSize {\n  height: number;\n  width: number;\n  scrollHeight: number;\n  scrollWidth: number;\n}\n\n/** @internal */\ninterface TargetSubscription {\n  readonly onUpdate: ResizeObserverEntryCallback;\n  readonly disableHeight: boolean;\n  readonly disableWidth: boolean;\n\n  size?: TargetSize;\n}\n\n/** @internal */\ninterface SubscribeOptions {\n  element: Element;\n  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  disableWidth: boolean;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0 This was added to help with testing. The\n * `subscriptions` and `sharedObserver` used to be module-level variables but\n * moving to a class makes it easier to mock. Checkout the\n * `src/tests-utils/ResizeObserver.ts`\n */\nexport class ResizeObserverManager {\n  frame: number;\n  subscriptions: Map<Element, Set<TargetSubscription>>;\n\n  /**\n   * Why is there a single shared observer instead of multiple and a\n   * \"subscription\" model?\n   *\n   * Note: Probably a bit of a premature optimization right now...\n   *\n   * @see https://github.com/WICG/resize-observer/issues/59\n   * @internal\n   */\n  sharedObserver: ResizeObserver | undefined;\n\n  constructor() {\n    this.frame = 0;\n    this.subscriptions = new Map();\n  }\n\n  subscribe = (options: SubscribeOptions): Unsubscribe => {\n    const { element, onUpdate, disableHeight, disableWidth } = options;\n\n    // lazy initialize the observer\n    const observer =\n      this.sharedObserver ||\n      new ResizeObserver((entries) => {\n        // this prevents the `ResizeObserver loop limit exceeded`\n        window.cancelAnimationFrame(this.frame);\n        this.frame = window.requestAnimationFrame(() => {\n          this.handleResizeEntries(entries);\n        });\n      });\n    this.sharedObserver = observer;\n\n    const updates = this.subscriptions.get(element) || new Set();\n    const subscription: TargetSubscription = {\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    };\n    updates.add(subscription);\n    if (!this.subscriptions.has(element)) {\n      this.subscriptions.set(element, updates);\n    }\n\n    observer.observe(element);\n\n    return () => {\n      observer.unobserve(element);\n      updates.delete(subscription);\n    };\n  };\n\n  handleResizeEntries = (entries: ResizeObserverEntry[]): void => {\n    for (const entry of entries) {\n      const targetSubscriptions = this.subscriptions.get(entry.target);\n      // shouldn't really happen\n      /* c8 ignore start */\n      if (!targetSubscriptions) {\n        continue;\n      }\n      /* c8 ignore end */\n\n      const entries = targetSubscriptions.values();\n      for (const subscription of entries) {\n        const { height, width } = entry.contentRect;\n        const { scrollHeight, scrollWidth } = entry.target;\n        const { onUpdate, size, disableHeight, disableWidth } = subscription;\n        const isHeightChange =\n          !disableHeight &&\n          (!size ||\n            size.height !== height ||\n            size.scrollHeight !== scrollHeight);\n        const isWidthChange =\n          !disableWidth &&\n          (!size || size.width !== width || size.scrollWidth !== scrollWidth);\n\n        subscription.size = {\n          height,\n          width,\n          scrollHeight,\n          scrollWidth,\n        };\n        if (isHeightChange || isWidthChange) {\n          onUpdate(entry);\n        }\n      }\n    }\n  };\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 Renamed from `UseResizeObserverOptions` and added\n * `onUpdate`/`disabled` options.\n */\nexport interface ResizeObserverHookOptions<E extends HTMLElement> {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * ResizeObserver each render.**\n   *\n   * This function will be called whenever the target element resizes.\n   *\n   * @see {@link useResizeObserver} for an example.\n   */\n  onUpdate: ResizeObserverEntryCallback;\n\n  /**\n   * Set this to `true` to prevent observing the element's size changes. THis is\n   * equivalent to not attaching the returned ref to any element.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for height\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for width\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { useResizeObserver } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * interface Size {\n *   height: number;\n *   width: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [{ height, width }, setSize] = useState<Size>({\n *     height: 0,\n *     width: 0,\n *   });\n *   const targetRef = useResizeObserver({\n *     onResize: useCallback((entry) => {\n *       const { height, width } = entry.borderBox;\n *       setSize({ height, width });\n *     }, []),\n *   });\n *\n *   return (\n *     <div ref={targetRef}>\n *       <table>\n *         <tbody>\n *           <tr>\n *             <th scope=\"col\">Height:</th>\n *             <td>{height}</td>\n *           </tr>\n *           <tr>\n *             <th scope=\"col\">Width:</th>\n *             <td>{width}</td>\n *           </tr>\n *         </tbody>\n *       </table>\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 The API was updated to match the `useIntersectionObserver`\n * implementation -- accepts only a single object parameter and returns a\n * {@link RefCallback} instead of `[nodeRef, refCallback]`\n */\nexport function useResizeObserver<E extends HTMLElement>(\n  options: ResizeObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onUpdate,\n    disabled,\n    disableHeight = false,\n    disableWidth = false,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    if (disabled || (disableHeight && disableWidth) || !element) {\n      return;\n    }\n\n    const unsubscribe = resizeObserverManager.subscribe({\n      element,\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [disableHeight, disableWidth, disabled, onUpdate, targetNodeRef]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","ResizeObserverManager","constructor","frame","subscriptions","sharedObserver","subscribe","options","element","onUpdate","disableHeight","disableWidth","observer","ResizeObserver","entries","window","cancelAnimationFrame","requestAnimationFrame","handleResizeEntries","updates","get","Set","subscription","add","has","set","observe","unobserve","delete","entry","targetSubscriptions","target","values","height","width","contentRect","scrollHeight","scrollWidth","size","isHeightChange","isWidthChange","Map","resizeObserverManager","useResizeObserver","ref","disabled","targetNodeRef","refCallback","current","unsubscribe"],"mappings":"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"}
+{"version":3,"sources":["../src/useResizeObserver.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, type Ref, type RefCallback } from \"react\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useElementSize } from \"./useElementSize.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;\n\n/** @internal */\ntype Unsubscribe = () => void;\n\n/** @internal */\ninterface TargetSize {\n  height: number;\n  width: number;\n  scrollHeight: number;\n  scrollWidth: number;\n}\n\n/** @internal */\ninterface TargetSubscription {\n  readonly onUpdate: ResizeObserverEntryCallback;\n  readonly disableHeight: boolean;\n  readonly disableWidth: boolean;\n\n  size?: TargetSize;\n}\n\n/** @internal */\ninterface SubscribeOptions {\n  element: Element;\n  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  disableWidth: boolean;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0 This was added to help with testing. The\n * `subscriptions` and `sharedObserver` used to be module-level variables but\n * moving to a class makes it easier to mock. Checkout the\n * `src/tests-utils/ResizeObserver.ts`\n */\nexport class ResizeObserverManager {\n  frame: number;\n  subscriptions: Map<Element, Set<TargetSubscription>>;\n\n  /**\n   * Why is there a single shared observer instead of multiple and a\n   * \"subscription\" model?\n   *\n   * Note: Probably a bit of a premature optimization right now...\n   *\n   * @see https://github.com/WICG/resize-observer/issues/59\n   * @internal\n   */\n  sharedObserver: ResizeObserver | undefined;\n\n  constructor() {\n    this.frame = 0;\n    this.subscriptions = new Map();\n  }\n\n  subscribe = (options: SubscribeOptions): Unsubscribe => {\n    const { element, onUpdate, disableHeight, disableWidth } = options;\n\n    // lazy initialize the observer\n    const observer =\n      this.sharedObserver ||\n      new ResizeObserver((entries) => {\n        // this prevents the `ResizeObserver loop limit exceeded`\n        window.cancelAnimationFrame(this.frame);\n        this.frame = window.requestAnimationFrame(() => {\n          this.handleResizeEntries(entries);\n        });\n      });\n    this.sharedObserver = observer;\n\n    const updates = this.subscriptions.get(element) || new Set();\n    const subscription: TargetSubscription = {\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    };\n    updates.add(subscription);\n    if (!this.subscriptions.has(element)) {\n      this.subscriptions.set(element, updates);\n    }\n\n    observer.observe(element);\n\n    return () => {\n      observer.unobserve(element);\n      updates.delete(subscription);\n    };\n  };\n\n  handleResizeEntries = (entries: ResizeObserverEntry[]): void => {\n    for (const entry of entries) {\n      const targetSubscriptions = this.subscriptions.get(entry.target);\n      // shouldn't really happen\n      /* c8 ignore start */\n      if (!targetSubscriptions) {\n        continue;\n      }\n      /* c8 ignore end */\n\n      const entries = targetSubscriptions.values();\n      for (const subscription of entries) {\n        const { height, width } = entry.contentRect;\n        const { scrollHeight, scrollWidth } = entry.target;\n        const { onUpdate, size, disableHeight, disableWidth } = subscription;\n        const isHeightChange =\n          !disableHeight &&\n          (!size ||\n            size.height !== height ||\n            size.scrollHeight !== scrollHeight);\n        const isWidthChange =\n          !disableWidth &&\n          (!size || size.width !== width || size.scrollWidth !== scrollWidth);\n\n        subscription.size = {\n          height,\n          width,\n          scrollHeight,\n          scrollWidth,\n        };\n        if (isHeightChange || isWidthChange) {\n          onUpdate(entry);\n        }\n      }\n    }\n  };\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 Renamed from `UseResizeObserverOptions` and added\n * `onUpdate`/`disabled` options.\n */\nexport interface ResizeObserverHookOptions<E extends HTMLElement> {\n  /**\n   * An optional ref to merge with the ref returned by this hook.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * **Must be wrapped in `useCallback` to prevent re-creating the\n   * ResizeObserver each render.**\n   *\n   * This function will be called whenever the target element resizes.\n   *\n   * @see {@link useResizeObserver} for an example.\n   */\n  onUpdate: ResizeObserverEntryCallback;\n\n  /**\n   * Set this to `true` to prevent observing the element's size changes. THis is\n   * equivalent to not attaching the returned ref to any element.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for height\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` if the {@link onUpdate} should not be fired for width\n   * changes.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * The resize observer is used to track the size changes of a specific element.\n * For most cases you can use the {@link useElementSize} instead, but this hook\n * can be used for more complex behavior with the {@link ResizeObserverEntry}.\n *\n * @remarks\n * \\@since 2.3.0\n * \\@since 6.0.0 The API was updated to match the `useIntersectionObserver`\n * implementation -- accepts only a single object parameter and returns a\n * {@link RefCallback} instead of `[nodeRef, refCallback]`\n */\nexport function useResizeObserver<E extends HTMLElement>(\n  options: ResizeObserverHookOptions<E>\n): RefCallback<E> {\n  const {\n    ref,\n    onUpdate,\n    disabled,\n    disableHeight = false,\n    disableWidth = false,\n  } = options;\n\n  const [targetNodeRef, refCallback] = useEnsuredRef(ref);\n  useEffect(() => {\n    const element = targetNodeRef.current;\n    if (disabled || (disableHeight && disableWidth) || !element) {\n      return;\n    }\n\n    const unsubscribe = resizeObserverManager.subscribe({\n      element,\n      onUpdate,\n      disableHeight,\n      disableWidth,\n    });\n\n    return () => {\n      unsubscribe();\n    };\n  }, [disableHeight, disableWidth, disabled, onUpdate, targetNodeRef]);\n\n  return refCallback;\n}\n"],"names":["useEffect","useEnsuredRef","ResizeObserverManager","constructor","frame","subscriptions","sharedObserver","subscribe","options","element","onUpdate","disableHeight","disableWidth","observer","ResizeObserver","entries","window","cancelAnimationFrame","requestAnimationFrame","handleResizeEntries","updates","get","Set","subscription","add","has","set","observe","unobserve","delete","entry","targetSubscriptions","target","values","height","width","contentRect","scrollHeight","scrollWidth","size","isHeightChange","isWidthChange","Map","resizeObserverManager","useResizeObserver","ref","disabled","targetNodeRef","refCallback","current","unsubscribe"],"mappings":"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"}

package/dist/useWindowSize.d.ts

@@ -1,18 +1,21 @@
+import { type ElementSize } from "./types.js";
+import { type ResizeListenerOptions } from "./useResizeListener.js";
 /**
  * @remarks \@since 6.0.0
  */
-export interface WindowSize {
-    height: number;
-    width: number;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export interface WindowSizeOptions extends AddEventListenerOptions {
+export interface WindowSizeOptions extends Omit<ResizeListenerOptions, "disabled" | "onUpdate"> {
     /**
-     * @defaultValue `true`
+     * The default value to use in SSR environments for the window's height.
+     *
+     * @defaultValue `0`
+     */
+    ssrHeight?: number;
+    /**
+     * The default value to use in SSR environments for the window's width.
+     *
+     * @defaultValue `0`
      */
-    throttle?: boolean;
+    ssrWidth?: number;
     /**
      * Set this to `true` to ignore resize events that only updated the height.
      * The hook can be disabled by setting this and {@link disableWidth} to
@@ -54,4 +57,4 @@ export interface WindowSizeOptions extends AddEventListenerOptions {
  *
  * @remarks \@since 6.0.0
  */
-export declare function useWindowSize(options?: WindowSizeOptions): WindowSize;
+export declare function useWindowSize(options?: WindowSizeOptions): ElementSize;

package/dist/useWindowSize.js

@@ -1,5 +1,6 @@
 "use client";
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import { useSsr } from "./SsrProvider.js";
 import { useResizeListener } from "./useResizeListener.js";
 /**
  * This is just a convenience wrapper around the {@link useResizeListener}.
@@ -25,12 +26,13 @@ import { useResizeListener } from "./useResizeListener.js";
  *
  * @remarks \@since 6.0.0
  */ export function useWindowSize(options = {}) {
-    const { once, signal, capture, passive, throttle, disableWidth, disableHeight } = options;
+    const { once, signal, capture, passive, throttle, ssrHeight = 0, ssrWidth = 0, disableWidth, disableHeight } = options;
+    const ssr = useSsr();
     const [size, setSize] = useState(()=>{
-        if (typeof window === "undefined") {
+        if (typeof window === "undefined" || ssr) {
             return {
-                height: 0,
-                width: 0
+                height: ssrHeight,
+                width: ssrWidth
             };
         }
         return {
@@ -45,7 +47,7 @@ import { useResizeListener } from "./useResizeListener.js";
         passive,
         throttle,
         disabled: disableHeight && disableWidth,
-        onUpdate () {
+        onUpdate: useCallback(()=>{
             setSize((prevSize)=>{
                 const nextSize = {
                     height: window.innerHeight,
@@ -55,7 +57,10 @@ import { useResizeListener } from "./useResizeListener.js";
                 const isWidthChange = !disableWidth && prevSize.width !== nextSize.width;
                 return isHeightChange || isWidthChange ? nextSize : prevSize;
             });
-        }
+        }, [
+            disableHeight,
+            disableWidth
+        ])
     });
     return size;
 }

package/dist/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useWindowSize.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { useResizeListener } from \"./useResizeListener.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSizeOptions extends AddEventListenerOptions {\n  /**\n   * @defaultValue `true`\n   */\n  throttle?: boolean;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the height.\n   * The hook can be disabled by setting this and {@link disableWidth} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the width.\n   * The hook can be disabled by setting this and {@link disableHeight} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * This is just a convenience wrapper around the {@link useResizeListener}.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useWindowSize } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width } = useWindowSize();\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSize(options: WindowSizeOptions = {}): WindowSize {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    disableWidth,\n    disableHeight,\n  } = options;\n\n  const [size, setSize] = useState(() => {\n    if (typeof window === \"undefined\") {\n      return {\n        height: 0,\n        width: 0,\n      };\n    }\n\n    return {\n      height: window.innerHeight,\n      width: window.innerWidth,\n    };\n  });\n\n  useResizeListener({\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    disabled: disableHeight && disableWidth,\n    onUpdate() {\n      setSize((prevSize) => {\n        const nextSize: WindowSize = {\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const isHeightChange =\n          !disableHeight && prevSize.height !== nextSize.height;\n        const isWidthChange =\n          !disableWidth && prevSize.width !== nextSize.width;\n\n        return isHeightChange || isWidthChange ? nextSize : prevSize;\n      });\n    },\n  });\n\n  return size;\n}\n"],"names":["useState","useResizeListener","useWindowSize","options","once","signal","capture","passive","throttle","disableWidth","disableHeight","size","setSize","window","height","width","innerHeight","innerWidth","disabled","onUpdate","prevSize","nextSize","isHeightChange","isWidthChange"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,iBAAiB,QAAQ,yBAAyB;AAsC3D;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,cAAcC,UAA6B,CAAC,CAAC;IAC3D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACd,GAAGP;IAEJ,MAAM,CAACQ,MAAMC,QAAQ,GAAGZ,SAAS;QAC/B,IAAI,OAAOa,WAAW,aAAa;YACjC,OAAO;gBACLC,QAAQ;gBACRC,OAAO;YACT;QACF;QAEA,OAAO;YACLD,QAAQD,OAAOG,WAAW;YAC1BD,OAAOF,OAAOI,UAAU;QAC1B;IACF;IAEAhB,kBAAkB;QAChBG;QACAC;QACAC;QACAC;QACAC;QACAU,UAAUR,iBAAiBD;QAC3BU;YACEP,QAAQ,CAACQ;gBACP,MAAMC,WAAuB;oBAC3BP,QAAQD,OAAOG,WAAW;oBAC1BD,OAAOF,OAAOI,UAAU;gBAC1B;gBAEA,MAAMK,iBACJ,CAACZ,iBAAiBU,SAASN,MAAM,KAAKO,SAASP,MAAM;gBACvD,MAAMS,gBACJ,CAACd,gBAAgBW,SAASL,KAAK,KAAKM,SAASN,KAAK;gBAEpD,OAAOO,kBAAkBC,gBAAgBF,WAAWD;YACtD;QACF;IACF;IAEA,OAAOT;AACT"}
+{"version":3,"sources":["../src/useWindowSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\nimport { type ElementSize } from \"./types.js\";\nimport {\n  useResizeListener,\n  type ResizeListenerOptions,\n} from \"./useResizeListener.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSizeOptions\n  extends Omit<ResizeListenerOptions, \"disabled\" | \"onUpdate\"> {\n  /**\n   * The default value to use in SSR environments for the window's height.\n   *\n   * @defaultValue `0`\n   */\n  ssrHeight?: number;\n\n  /**\n   * The default value to use in SSR environments for the window's width.\n   *\n   * @defaultValue `0`\n   */\n  ssrWidth?: number;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the height.\n   * The hook can be disabled by setting this and {@link disableWidth} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableHeight?: boolean;\n\n  /**\n   * Set this to `true` to ignore resize events that only updated the width.\n   * The hook can be disabled by setting this and {@link disableHeight} to\n   * `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableWidth?: boolean;\n}\n\n/**\n * This is just a convenience wrapper around the {@link useResizeListener}.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useWindowSize } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width } = useWindowSize();\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSize(options: WindowSizeOptions = {}): ElementSize {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    ssrHeight = 0,\n    ssrWidth = 0,\n    disableWidth,\n    disableHeight,\n  } = options;\n\n  const ssr = useSsr();\n  const [size, setSize] = useState(() => {\n    if (typeof window === \"undefined\" || ssr) {\n      return {\n        height: ssrHeight,\n        width: ssrWidth,\n      };\n    }\n\n    return {\n      height: window.innerHeight,\n      width: window.innerWidth,\n    };\n  });\n\n  useResizeListener({\n    once,\n    signal,\n    capture,\n    passive,\n    throttle,\n    disabled: disableHeight && disableWidth,\n    onUpdate: useCallback(() => {\n      setSize((prevSize) => {\n        const nextSize: ElementSize = {\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const isHeightChange =\n          !disableHeight && prevSize.height !== nextSize.height;\n        const isWidthChange =\n          !disableWidth && prevSize.width !== nextSize.width;\n\n        return isHeightChange || isWidthChange ? nextSize : prevSize;\n      });\n    }, [disableHeight, disableWidth]),\n  });\n\n  return size;\n}\n"],"names":["useCallback","useState","useSsr","useResizeListener","useWindowSize","options","once","signal","capture","passive","throttle","ssrHeight","ssrWidth","disableWidth","disableHeight","ssr","size","setSize","window","height","width","innerHeight","innerWidth","disabled","onUpdate","prevSize","nextSize","isHeightChange","isWidthChange"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SACEC,iBAAiB,QAEZ,yBAAyB;AAwChC;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,cAAcC,UAA6B,CAAC,CAAC;IAC3D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,YAAY,CAAC,EACbC,WAAW,CAAC,EACZC,YAAY,EACZC,aAAa,EACd,GAAGT;IAEJ,MAAMU,MAAMb;IACZ,MAAM,CAACc,MAAMC,QAAQ,GAAGhB,SAAS;QAC/B,IAAI,OAAOiB,WAAW,eAAeH,KAAK;YACxC,OAAO;gBACLI,QAAQR;gBACRS,OAAOR;YACT;QACF;QAEA,OAAO;YACLO,QAAQD,OAAOG,WAAW;YAC1BD,OAAOF,OAAOI,UAAU;QAC1B;IACF;IAEAnB,kBAAkB;QAChBG;QACAC;QACAC;QACAC;QACAC;QACAa,UAAUT,iBAAiBD;QAC3BW,UAAUxB,YAAY;YACpBiB,QAAQ,CAACQ;gBACP,MAAMC,WAAwB;oBAC5BP,QAAQD,OAAOG,WAAW;oBAC1BD,OAAOF,OAAOI,UAAU;gBAC1B;gBAEA,MAAMK,iBACJ,CAACb,iBAAiBW,SAASN,MAAM,KAAKO,SAASP,MAAM;gBACvD,MAAMS,gBACJ,CAACf,gBAAgBY,SAASL,KAAK,KAAKM,SAASN,KAAK;gBAEpD,OAAOO,kBAAkBC,gBAAgBF,WAAWD;YACtD;QACF,GAAG;YAACX;YAAeD;SAAa;IAClC;IAEA,OAAOG;AACT"}

package/dist/utils/getMiddleOfRange.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface GetMiddleOfRangeOptions {
+    min: number;
+    max: number;
+    step: number;
+}
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function getMiddleOfRange(options: GetMiddleOfRangeOptions): number;

package/dist/utils/getMiddleOfRange.js

@@ -0,0 +1,20 @@
+import { getRangeSteps } from "./getRangeSteps.js";
+import { nearest } from "./nearest.js";
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function getMiddleOfRange(options) {
+    const { min, max, step } = options;
+    return nearest({
+        min,
+        max,
+        steps: getRangeSteps({
+            min,
+            max,
+            step
+        }),
+        value: (max - min) / 2 + min
+    });
+}
+
+//# sourceMappingURL=getMiddleOfRange.js.map

package/dist/utils/getMiddleOfRange.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getMiddleOfRange.ts"],"sourcesContent":["import { getRangeSteps } from \"./getRangeSteps.js\";\nimport { nearest } from \"./nearest.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface GetMiddleOfRangeOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function getMiddleOfRange(options: GetMiddleOfRangeOptions): number {\n  const { min, max, step } = options;\n\n  return nearest({\n    min,\n    max,\n    steps: getRangeSteps({ min, max, step }),\n    value: (max - min) / 2 + min,\n  });\n}\n"],"names":["getRangeSteps","nearest","getMiddleOfRange","options","min","max","step","steps","value"],"mappings":"AAAA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,OAAO,QAAQ,eAAe;AAWvC;;;CAGC,GACD,OAAO,SAASC,iBAAiBC,OAAgC;IAC/D,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOF,QAAQ;QACbG;QACAC;QACAE,OAAOP,cAAc;YAAEI;YAAKC;YAAKC;QAAK;QACtCE,OAAO,AAACH,CAAAA,MAAMD,GAAE,IAAK,IAAIA;IAC3B;AACF"}

package/dist/utils/getRangeDefaultValue.d.ts

@@ -1,12 +1,10 @@
-import type { UseStateInitializer } from "../types.js";
+import { type UseStateInitializer } from "../types.js";
+import { type GetMiddleOfRangeOptions } from "./getMiddleOfRange.js";
 /**
  * @internal
  * @remarks \@since 6.0.0
  */
-export interface RangeDefaultValueOptions {
-    min: number;
-    max: number;
-    step: number;
+export interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {
     defaultValue?: UseStateInitializer<number>;
 }
 /**

package/dist/utils/getRangeDefaultValue.js

@@ -1,23 +1,13 @@
-import { getRangeSteps } from "./getRangeSteps.js";
-import { nearest } from "./nearest.js";
+import { getMiddleOfRange } from "./getMiddleOfRange.js";
 /**
  * @internal
  * @remarks \@since 6.0.0
  */ export function getRangeDefaultValue(options) {
-    const { min, max, step, defaultValue } = options;
+    const { defaultValue } = options;
     if (typeof defaultValue !== "undefined") {
         return defaultValue;
     }
-    return ()=>nearest({
-            min,
-            max,
-            steps: getRangeSteps({
-                min,
-                max,
-                step
-            }),
-            value: (max - min) / 2
-        });
+    return ()=>getMiddleOfRange(options);
 }
 
 //# sourceMappingURL=getRangeDefaultValue.js.map

package/dist/utils/getRangeDefaultValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import type { UseStateInitializer } from \"../types.js\";\nimport { getRangeSteps } from \"./getRangeSteps.js\";\nimport { nearest } from \"./nearest.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeDefaultValueOptions {\n  min: number;\n  max: number;\n  step: number;\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { min, max, step, defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () =>\n    nearest({\n      min,\n      max,\n      steps: getRangeSteps({ min, max, step }),\n      value: (max - min) / 2,\n    });\n}\n"],"names":["getRangeSteps","nearest","getRangeDefaultValue","options","min","max","step","defaultValue","steps","value"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,OAAO,QAAQ,eAAe;AAavC;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAEC,YAAY,EAAE,GAAGJ;IACzC,IAAI,OAAOI,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IACLN,QAAQ;YACNG;YACAC;YACAG,OAAOR,cAAc;gBAAEI;gBAAKC;gBAAKC;YAAK;YACtCG,OAAO,AAACJ,CAAAA,MAAMD,GAAE,IAAK;QACvB;AACJ"}
+{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import { type UseStateInitializer } from \"../types.js\";\nimport {\n  getMiddleOfRange,\n  type GetMiddleOfRangeOptions,\n} from \"./getMiddleOfRange.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () => getMiddleOfRange(options);\n}\n"],"names":["getMiddleOfRange","getRangeDefaultValue","options","defaultValue"],"mappings":"AACA,SACEA,gBAAgB,QAEX,wBAAwB;AAU/B;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IAAMH,iBAAiBE;AAChC"}

package/dist/utils/getRangeSteps.d.ts

@@ -16,4 +16,4 @@ export interface RangeStepsOptions {
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
  */
-export declare const getRangeSteps: (options: RangeStepsOptions) => number;
+export declare function getRangeSteps(options: RangeStepsOptions): number;

package/dist/utils/getRangeSteps.js

@@ -9,9 +9,9 @@
  * \@since 2.5.0
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
- */ export const getRangeSteps = (options)=>{
+ */ export function getRangeSteps(options) {
     const { min, max, step } = options;
     return Math.abs(max - min) / step;
-};
+}
 
 //# sourceMappingURL=getRangeSteps.js.map

package/dist/utils/getRangeSteps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeStepsOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * Gets the number of steps in the allowed range of values.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments and\n * renamed from `getSteps` to `getRangeSteps`.\n */\nexport const getRangeSteps = (options: RangeStepsOptions): number => {\n  const { min, max, step } = options;\n\n  return Math.abs(max - min) / step;\n};\n"],"names":["getRangeSteps","options","min","max","step","Math","abs"],"mappings":"AAAA;;;CAGC,GAOD;;;;;;;;CAQC,GACD,OAAO,MAAMA,gBAAgB,CAACC;IAC5B,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOI,KAAKC,GAAG,CAACH,MAAMD,OAAOE;AAC/B,EAAE"}
+{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeStepsOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * Gets the number of steps in the allowed range of values.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments and\n * renamed from `getSteps` to `getRangeSteps`.\n */\nexport function getRangeSteps(options: RangeStepsOptions): number {\n  const { min, max, step } = options;\n\n  return Math.abs(max - min) / step;\n}\n"],"names":["getRangeSteps","options","min","max","step","Math","abs"],"mappings":"AAAA;;;CAGC,GAOD;;;;;;;;CAQC,GACD,OAAO,SAASA,cAAcC,OAA0B;IACtD,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOI,KAAKC,GAAG,CAACH,MAAMD,OAAOE;AAC/B"}

package/dist/utils/nearest.js

@@ -20,7 +20,7 @@
     // precision gets weird:
     // 0.28 * 100 === 28.000000000000004
     const step = range / steps;
-    const decimals = Number.isInteger(step) ? range % steps : step.toString().split(".")[1].length;
+    const decimals = Number.isInteger(step) ? range % steps : `${step}`.split(".")[1].length;
     return Math.min(max, Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals))));
 }
 

package/dist/utils/nearest.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface NearestOptions {\n  min: number;\n  max: number;\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @remarks\n * \\@since 2.5.0 Added the `range` param\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : step.toString().split(\".\")[1].length;\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","toString","split","length","parseFloat","toFixed"],"mappings":"AAAA;;;CAGC,GAWD;;;;;;;;CAQC,GACD,OAAO,SAASA,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACRO,KAAKI,QAAQ,GAAGC,KAAK,CAAC,IAAI,CAAC,EAAE,CAACC,MAAM;IAExC,OAAOT,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKgB,WAAW,AAACR,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGiB,OAAO,CAACP;AAE/D"}
+{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface NearestOptions {\n  min: number;\n  max: number;\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @remarks\n * \\@since 2.5.0 Added the `range` param\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : `${step}`.split(\".\")[1].length;\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","split","length","parseFloat","toFixed"],"mappings":"AAAA;;;CAGC,GAWD;;;;;;;;CAQC,GACD,OAAO,SAASA,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACR,CAAC,EAAEO,KAAK,CAAC,CAACI,KAAK,CAAC,IAAI,CAAC,EAAE,CAACC,MAAM;IAElC,OAAOR,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKe,WAAW,AAACP,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGgB,OAAO,CAACN;AAE/D"}

package/dist/window-splitter/_window-splitter.scss

@@ -9,43 +9,17 @@ $disable-vertical: false !default;
 $disable-reversed: false !default;
 $disable-absolute-position: false !default;
 
-$window-splitter-size: 1rem !default;
-$window-splitter-background-size: 0.25rem !default;
-$window-splitter-background-color: interaction.get-var(focus-color) !default;
-$window-splitter-z-index: 30 !default;
-
-$var-lookup: (
-  top: (
-    var: --rmd-window-splitter-top,
-    value: 0,
-  ),
-  right: (
-    var: --rmd-window-splitter-right,
-    value: 0,
-  ),
-  bottom: (
-    var: --rmd-window-splitter-bottom,
-    value: 0,
-  ),
-  left: (
-    var: --rmd-window-splitter-left,
-    value: 0,
-  ),
-  opacity: (
-    var: --rmd-window-splitter-opacity,
-    value: 0,
-  ),
-  position: (
-    var: --rmd-window-splitter-position,
-    value: 0,
-  ),
-);
+$size: 1rem !default;
+$background-size: 0.25rem !default;
+$background-color: interaction.get-var(focus-color) !default;
+$z-index: 30 !default;
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "window-splitter var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$variables: (top, right, bottom, left, opacity, position);
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "window-splitter");
+  // window-splitter variables don't make much sense to set globally
+  $value: if($fallback, $fallback, 0);
   @if $value {
     @return var(#{$var}, #{$value});
   }
@@ -54,9 +28,9 @@ $var-lookup: (
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "window-splitter var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "window-splitter")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -67,6 +41,17 @@ $var-lookup: (
   @if not $disable-everything {
     .rmd-window-splitter {
       @include use-var(opacity);
+      @include utils.mouse-hover {
+        @include set-var(opacity, 1);
+      }
+      @include utils.keyboard-only {
+        // Do not use `:focus-visible` here since since it'll still be active
+        // after dragging with a mouse until the user clicks something else. The
+        // `--dragging` state handles that part
+        &:focus {
+          @include set-var(opacity, 1);
+        }
+      }
 
       background-color: transparent;
       border: 0;
@@ -74,31 +59,15 @@ $var-lookup: (
       padding: 0;
       position: fixed;
       transition: opacity transition.$linear-duration;
-      z-index: $window-splitter-z-index;
+      z-index: $z-index;
 
       &::after {
-        background-color: $window-splitter-background-color;
+        background-color: $background-color;
         content: "";
         inset: 0;
         position: absolute;
       }
 
-      &:hover {
-        @include set-var(opacity, 1);
-      }
-
-      @include utils.keyboard-only {
-        &:focus {
-          @include set-var(opacity, 1);
-        }
-      }
-
-      @include utils.touch-only {
-        &:hover {
-          @include set-var(opacity, 0);
-        }
-      }
-
       @if not $disable-horizontal {
         &--h {
           @include utils.auto-rtl(left, get-var(position));
@@ -106,10 +75,10 @@ $var-lookup: (
           @include use-var(top);
 
           cursor: col-resize;
-          width: $window-splitter-size;
+          width: $size;
 
           &::after {
-            width: $window-splitter-background-size;
+            width: $background-size;
           }
         }
 
@@ -133,11 +102,11 @@ $var-lookup: (
           @include use-var(top, position);
 
           cursor: row-resize;
-          height: $window-splitter-size;
+          height: $size;
           width: 100%;
 
           &::after {
-            height: $window-splitter-background-size;
+            height: $background-size;
           }
         }
 
@@ -148,7 +117,7 @@ $var-lookup: (
             top: auto;
 
             &::after {
-              top: calc(100% - $window-splitter-background-size);
+              top: calc(100% - $background-size);
             }
           }
         }

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

@@ -1,5 +1,5 @@
-import type { Ref, RefCallback } from "react";
-import type { BaseDraggableOptions, DraggableImplementation, DraggableKeyboardEventHandlers, DraggableMouseEventHandlers, DraggableStateOptions, DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
+import { type Ref, type RefCallback } from "react";
+import { type BaseDraggableOptions, type DraggableImplementation, type DraggableKeyboardEventHandlers, type DraggableMouseEventHandlers, type DraggableStateOptions, type DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-window-splitter-top"?: number | string;
@@ -51,9 +51,7 @@ export interface WindowSplitterImplementation<E extends HTMLElement = HTMLButton
     splitterProps: WindowSplitterWidgetProps<E>;
 }
 /**
- * You are most likely looking for the `useWindowSplitter` or
- * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook
- * to implement those two versions.
+ * Used to control the state for the `WindowSplitter` component.
  *
  * @example
  * Custom Implementation

package/dist/window-splitter/useWindowSplitter.js

@@ -1,11 +1,8 @@
 "use client";
 import { useDraggable } from "../draggable/useDraggable.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { getPercentage } from "../utils/getPercentage.js";
 /**
- * You are most likely looking for the `useWindowSplitter` or
- * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook
- * to implement those two versions.
+ * Used to control the state for the `WindowSplitter` component.
  *
  * @example
  * Custom Implementation
@@ -37,15 +34,10 @@ import { getPercentage } from "../utils/getPercentage.js";
  *
  * @remarks \@since 6.0.0
  */ export function useWindowSplitter(options) {
-    const { id: propId, min, max, reversed = false, vertical, withinOffsetParent } = options;
+    const { id: propId, reversed = false, vertical } = options;
     const id = useEnsuredId(propId, "splitter");
     const draggableImplementation = useDraggable(options);
-    const { value, dragging, draggableRef, dragPercentage, mouseEventHandlers, keyboardEventHandlers } = draggableImplementation;
-    const percentage = dragging && withinOffsetParent ? dragPercentage : getPercentage({
-        min,
-        max,
-        value
-    });
+    const { dragging, percentage, draggableRef, mouseEventHandlers, keyboardEventHandlers } = draggableImplementation;
     return {
         ...draggableImplementation,
         splitterProps: {