@react-md/core 6.2.1 → 6.3.1

package/dist/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useResizeObserver.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback, useEffect } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useElementSize } from \"./useElementSize.js\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @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  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  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 * @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 stop */\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 * @since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\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 * @example Simple Example\n * ```tsx\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const elementRef = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       const element = entry.target;\n *       const { height, width } = entry.contentRect;\n *       const { inlineSize, blockSize } = entry.borderBoxSize[0];\n *       // do something\n *     }, []),\n *   });\n *\n *   return <div ref={elementRef}>{...whatever...}</div>\n * }\n * ```\n *\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\";\n\nimport { type Ref, type RefCallback, useEffect } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useElementSize } from \"./useElementSize.js\";\nimport { useEnsuredRef } from \"./useEnsuredRef.js\";\n\n/**\n * @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  onUpdate: ResizeObserverEntryCallback;\n  disableHeight: boolean;\n  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 * @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 stop */\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 * @since 6.0.0\n */\nexport const resizeObserverManager = new ResizeObserverManager();\n\n/**\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 * @example Simple Example\n * ```tsx\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const elementRef = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       const element = entry.target;\n *       const { height, width } = entry.contentRect;\n *       const { inlineSize, blockSize } = entry.borderBoxSize[0];\n *       // do something\n *     }, []),\n *   });\n *\n *   return <div ref={elementRef}>{...whatever...}</div>\n * }\n * ```\n *\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","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/utils/getMiddleOfRange.d.ts

@@ -1,9 +1,8 @@
+import { type MinMaxRange } from "../types.js";
 /**
  * @since 6.0.0
  */
-export interface GetMiddleOfRangeOptions {
-    min: number;
-    max: number;
+export interface GetMiddleOfRangeOptions extends MinMaxRange {
     step: number;
 }
 /**

package/dist/utils/getMiddleOfRange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getMiddleOfRange.ts"],"sourcesContent":["import { getRangeSteps } from \"./getRangeSteps.js\";\nimport { nearest } from \"./nearest.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface GetMiddleOfRangeOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * @internal\n * @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"}
+{"version":3,"sources":["../../src/utils/getMiddleOfRange.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\nimport { getRangeSteps } from \"./getRangeSteps.js\";\nimport { nearest } from \"./nearest.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface GetMiddleOfRangeOptions extends MinMaxRange {\n  step: number;\n}\n\n/**\n * @internal\n * @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":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,OAAO,QAAQ,eAAe;AASvC;;;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/getPercentage.d.ts

@@ -1,13 +1,6 @@
+import { type MinMaxRange } from "../types.js";
 /** @since 4.0.1 */
-export interface GetPercentageOptions {
-    /**
-     * The min value allowed.
-     */
-    min: number;
-    /**
-     * The max value allowed.
-     */
-    max: number;
+export interface GetPercentageOptions extends MinMaxRange {
     /**
      * The current value
      */

package/dist/utils/getPercentage.js

@@ -1,4 +1,4 @@
-/** @since 4.0.1 */ /**
+/**
  * Gets the current percentage based on the min, max, and current value.
  *
  * @returns the percentage that the `value` is between the `min` and `max`

package/dist/utils/getPercentage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getPercentage.ts"],"sourcesContent":["/** @since 4.0.1 */\nexport interface GetPercentageOptions {\n  /**\n   * The min value allowed.\n   */\n  min: number;\n\n  /**\n   * The max value allowed.\n   */\n  max: number;\n\n  /**\n   * The current value\n   */\n  value: number;\n\n  /**\n   * Boolean if the min, max, and value options should be validated to make sure\n   * they are within the correct range relative to each other.\n   *\n   * @defaultValue `false`\n   */\n  validate?: boolean;\n}\n\n/**\n * Gets the current percentage based on the min, max, and current value.\n *\n * @returns the percentage that the `value` is between the `min` and `max`\n * values.\n *\n * @since 4.0.1 uses an object for options instead of multiple arguments.\n * @since 6.0.0 Updated to be included in the public API and `validate`\n * defaults to `false` instead of `true`.\n */\nexport function getPercentage(options: GetPercentageOptions): number {\n  const { min, max, value, validate = false } = options;\n  if (validate) {\n    if (min >= max) {\n      throw new RangeError(\n        \"A range must have the min value less than the max value\"\n      );\n    }\n\n    if (value > max || value < min) {\n      throw new RangeError(\"A value must be between the min and max values\");\n    }\n  }\n\n  const range = max - min;\n  const start = value - min;\n  const percentage = start / range;\n  return Math.max(0, Math.min(Math.abs(percentage), 1));\n}\n"],"names":["getPercentage","options","min","max","value","validate","RangeError","range","start","percentage","Math","abs"],"mappings":"AAAA,iBAAiB,GA0BjB;;;;;;;;;CASC,GACD,OAAO,SAASA,cAAcC,OAA6B;IACzD,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAC9C,IAAII,UAAU;QACZ,IAAIH,OAAOC,KAAK;YACd,MAAM,IAAIG,WACR;QAEJ;QAEA,IAAIF,QAAQD,OAAOC,QAAQF,KAAK;YAC9B,MAAM,IAAII,WAAW;QACvB;IACF;IAEA,MAAMC,QAAQJ,MAAMD;IACpB,MAAMM,QAAQJ,QAAQF;IACtB,MAAMO,aAAaD,QAAQD;IAC3B,OAAOG,KAAKP,GAAG,CAAC,GAAGO,KAAKR,GAAG,CAACQ,KAAKC,GAAG,CAACF,aAAa;AACpD"}
+{"version":3,"sources":["../../src/utils/getPercentage.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\n\n/** @since 4.0.1 */\nexport interface GetPercentageOptions extends MinMaxRange {\n  /**\n   * The current value\n   */\n  value: number;\n\n  /**\n   * Boolean if the min, max, and value options should be validated to make sure\n   * they are within the correct range relative to each other.\n   *\n   * @defaultValue `false`\n   */\n  validate?: boolean;\n}\n\n/**\n * Gets the current percentage based on the min, max, and current value.\n *\n * @returns the percentage that the `value` is between the `min` and `max`\n * values.\n *\n * @since 4.0.1 uses an object for options instead of multiple arguments.\n * @since 6.0.0 Updated to be included in the public API and `validate`\n * defaults to `false` instead of `true`.\n */\nexport function getPercentage(options: GetPercentageOptions): number {\n  const { min, max, value, validate = false } = options;\n  if (validate) {\n    if (min >= max) {\n      throw new RangeError(\n        \"A range must have the min value less than the max value\"\n      );\n    }\n\n    if (value > max || value < min) {\n      throw new RangeError(\"A value must be between the min and max values\");\n    }\n  }\n\n  const range = max - min;\n  const start = value - min;\n  const percentage = start / range;\n  return Math.max(0, Math.min(Math.abs(percentage), 1));\n}\n"],"names":["getPercentage","options","min","max","value","validate","RangeError","range","start","percentage","Math","abs"],"mappings":"AAkBA;;;;;;;;;CASC,GACD,OAAO,SAASA,cAAcC,OAA6B;IACzD,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAC9C,IAAII,UAAU;QACZ,IAAIH,OAAOC,KAAK;YACd,MAAM,IAAIG,WACR;QAEJ;QAEA,IAAIF,QAAQD,OAAOC,QAAQF,KAAK;YAC9B,MAAM,IAAII,WAAW;QACvB;IACF;IAEA,MAAMC,QAAQJ,MAAMD;IACpB,MAAMM,QAAQJ,QAAQF;IACtB,MAAMO,aAAaD,QAAQD;IAC3B,OAAOG,KAAKP,GAAG,CAAC,GAAGO,KAAKR,GAAG,CAACQ,KAAKC,GAAG,CAACF,aAAa;AACpD"}

package/dist/utils/getRangeSteps.d.ts

@@ -1,10 +1,9 @@
+import { type MinMaxRange } from "../types.js";
 /**
  * @internal
  * @since 6.0.0
  */
-export interface RangeStepsOptions {
-    min: number;
-    max: number;
+export interface RangeStepsOptions extends MinMaxRange {
     step: number;
 }
 /**

package/dist/utils/getRangeSteps.js

@@ -1,7 +1,4 @@
 /**
- * @internal
- * @since 6.0.0
- */ /**
  * Gets the number of steps in the allowed range of values.
  *
  * @internal

package/dist/utils/getRangeSteps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["/**\n * @internal\n * @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 * @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;;;;;;;CAOC,GACD,OAAO,SAASA,cAAcC,OAA0B;IACtD,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOI,KAAKC,GAAG,CAACH,MAAMD,OAAOE;AAC/B"}
+{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface RangeStepsOptions extends MinMaxRange {\n  step: number;\n}\n\n/**\n * Gets the number of steps in the allowed range of values.\n *\n * @internal\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":"AAUA;;;;;;;CAOC,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.d.ts

@@ -1,10 +1,9 @@
+import { type MinMaxRange } from "../types.js";
 /**
  * @internal
  * @since 6.0.0
  */
-export interface NearestOptions {
-    min: number;
-    max: number;
+export interface NearestOptions extends MinMaxRange {
     steps: number;
     value: number;
     /** @defaultValue `max - min` */

package/dist/utils/nearest.js

@@ -1,7 +1,4 @@
 /**
- * @internal
- * @since 6.0.0
- */ /**
  * Rounds a number to the nearest step within a min/max range.
  *
  * @see https://stackoverflow.com/a/13635455

package/dist/utils/nearest.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["/**\n * @internal\n * @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 * @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;;;;;;;CAOC,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,GAAGO,MAAM,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"}
+{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface NearestOptions extends MinMaxRange {\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 * @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":"AAcA;;;;;;;CAOC,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,GAAGO,MAAM,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/utils/trigonometry.d.ts

@@ -0,0 +1,31 @@
+import { type Point } from "../types.js";
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export declare const radiansToDegrees: (radians: number) => number;
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export declare const degreesToRadians: (degrees: number) => number;
+/**
+ * @since 6.3.0
+ * @internal
+ */
+interface IsPointInCircleOptions {
+    point: Point;
+    center: Point;
+    radius: number;
+}
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export declare function isPointInCircle(options: IsPointInCircleOptions): boolean;
+/**
+ * @internal
+ * @since 6.3.0
+ */
+export declare function calcHypotenuse(point: Point): number;
+export {};

package/dist/utils/trigonometry.js

@@ -0,0 +1,25 @@
+/**
+ * @since 6.3.0
+ * @internal
+ */ export const radiansToDegrees = (radians)=>radians * 180 / Math.PI;
+/**
+ * @since 6.3.0
+ * @internal
+ */ export const degreesToRadians = (degrees)=>degrees * Math.PI / 180;
+/**
+ * @since 6.3.0
+ * @internal
+ */ export function isPointInCircle(options) {
+    const { point, center, radius } = options;
+    const distance = (center.x - point.x) ** 2 + (center.y - point.y) ** 2;
+    return distance <= radius ** 2;
+}
+/**
+ * @internal
+ * @since 6.3.0
+ */ export function calcHypotenuse(point) {
+    const { x, y } = point;
+    return Math.sqrt(x * x + y * y);
+}
+
+//# sourceMappingURL=trigonometry.js.map

package/dist/utils/trigonometry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/trigonometry.ts"],"sourcesContent":["import { type Point } from \"../types.js\";\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const radiansToDegrees = (radians: number): number =>\n  (radians * 180) / Math.PI;\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport const degreesToRadians = (degrees: number): number =>\n  (degrees * Math.PI) / 180;\n\n/**\n * @since 6.3.0\n * @internal\n */\ninterface IsPointInCircleOptions {\n  point: Point;\n  center: Point;\n  radius: number;\n}\n\n/**\n * @since 6.3.0\n * @internal\n */\nexport function isPointInCircle(options: IsPointInCircleOptions): boolean {\n  const { point, center, radius } = options;\n\n  const distance = (center.x - point.x) ** 2 + (center.y - point.y) ** 2;\n  return distance <= radius ** 2;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function calcHypotenuse(point: Point): number {\n  const { x, y } = point;\n\n  return Math.sqrt(x * x + y * y);\n}\n"],"names":["radiansToDegrees","radians","Math","PI","degreesToRadians","degrees","isPointInCircle","options","point","center","radius","distance","x","y","calcHypotenuse","sqrt"],"mappings":"AAEA;;;CAGC,GACD,OAAO,MAAMA,mBAAmB,CAACC,UAC/B,AAACA,UAAU,MAAOC,KAAKC,EAAE,CAAC;AAE5B;;;CAGC,GACD,OAAO,MAAMC,mBAAmB,CAACC,UAC/B,AAACA,UAAUH,KAAKC,EAAE,GAAI,IAAI;AAY5B;;;CAGC,GACD,OAAO,SAASG,gBAAgBC,OAA+B;IAC7D,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGH;IAElC,MAAMI,WAAW,AAACF,CAAAA,OAAOG,CAAC,GAAGJ,MAAMI,CAAC,AAADA,KAAM,IAAI,AAACH,CAAAA,OAAOI,CAAC,GAAGL,MAAMK,CAAC,AAADA,KAAM;IACrE,OAAOF,YAAYD,UAAU;AAC/B;AAEA;;;CAGC,GACD,OAAO,SAASI,eAAeN,KAAY;IACzC,MAAM,EAAEI,CAAC,EAAEC,CAAC,EAAE,GAAGL;IAEjB,OAAON,KAAKa,IAAI,CAACH,IAAIA,IAAIC,IAAIA;AAC/B"}

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

@@ -1,20 +1,13 @@
 import { type ButtonHTMLAttributes } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-window-splitter-top"?: number | string;
-        "--rmd-window-splitter-right"?: number | string;
-        "--rmd-window-splitter-bottom"?: number | string;
-        "--rmd-window-splitter-left"?: number | string;
-        "--rmd-window-splitter-opacity"?: number | string;
-        "--rmd-window-splitter-position"?: number | string;
-    }
-}
+import { type BaseWindowSplitterClassNameOptions } from "./styles.js";
 /**
- * @since 6.0.0
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties
+ * module augmentation.
  */
-export interface BaseWindowSplitterProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> {
+export interface BaseWindowSplitterProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">, BaseWindowSplitterClassNameOptions {
     /**
      * This will be provided by the {@link useWindowSplitter} hook.
      */
@@ -27,13 +20,6 @@ export interface BaseWindowSplitterProps extends Omit<ButtonHTMLAttributes<HTMLB
      * This will be provided by the {@link useWindowSplitter} hook.
      */
     reversed: boolean;
-    /**
-     * Set this to `true` if the window splitter should use `position: absolute`
-     * instead of `position: fixed`.
-     *
-     * @defaultValue `false`
-     */
-    disableFixed?: boolean;
 }
 /**
  * @since 6.0.0

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

@@ -1 +1 @@
-{"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\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 * @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 * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\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;AAkD7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,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 {\n  type BaseWindowSplitterClassNameOptions,\n  windowSplitter,\n} from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\">,\n    BaseWindowSplitterClassNameOptions {\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/**\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 * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\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,SAEEC,cAAc,QACT,cAAc;AAkCrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,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.d.ts

@@ -1,12 +1,36 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-window-splitter-size"?: string | number;
+        "--rmd-window-splitter-background-size"?: string | number;
+        "--rmd-window-splitter-x"?: string | number;
+        "--rmd-window-splitter-y"?: string | number;
+        "--rmd-window-splitter-z"?: string | number;
+        "--rmd-window-splitter-position"?: string | number;
+        "--rmd-window-splitter-backgrond-color"?: string;
+        "--rmd-window-splitter-opacity"?: string | number;
+    }
+}
 /**
- * @since 6.0.0
+ * @since 6.3.1
  */
-export interface WindowSplitterClassNameOptions {
+export interface BaseWindowSplitterClassNameOptions {
     className?: string;
+    /**
+     * Set this to `true` if the window splitter should use `position: absolute`
+     * instead of `position: fixed`.
+     *
+     * @defaultValue `false`
+     */
+    disableFixed?: boolean;
+}
+/**
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions
+ */
+export interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {
     dragging?: boolean;
     reversed?: boolean;
     vertical?: boolean;
-    disableFixed?: boolean;
 }
 /**
  * @since 6.0.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\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"}
+{"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"}

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

@@ -23,7 +23,7 @@ export type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> = B
 /**
  * @since 6.0.0
  */
-export interface WindowSplitterWidgetProps<E extends HTMLElement> extends Required<DraggableMouseEventHandlers<E>>, Required<DraggableKeyboardEventHandlers<E>> {
+export interface WindowSplitterWidgetProps<E extends HTMLElement = HTMLButtonElement> extends Required<DraggableMouseEventHandlers<E>>, Required<DraggableKeyboardEventHandlers<E>> {
     "aria-orientation": "vertical" | undefined;
     "aria-valuenow": number;
     "aria-valuemin": number;

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<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;AAsDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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> 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -84,19 +84,19 @@
     "@microsoft/api-extractor": "^7.52.8",
     "@mlaursen/eslint-config": "^8.0.1",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.11.29",
-    "@swc/jest": "^0.2.38",
+    "@swc/core": "^1.12.11",
+    "@swc/jest": "^0.2.39",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@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.17",
+    "@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.29.0",
+    "eslint": "^9.30.1",
     "filesize": "^10.1.6",
     "glob": "11.0.3",
     "jest": "^29.7.0",
@@ -105,8 +105,8 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
-    "stylelint": "^16.20.0",
+    "prettier": "^3.6.2",
+    "stylelint": "^16.21.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
@@ -115,7 +115,7 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",

package/src/app-bar/styles.ts

@@ -8,8 +8,6 @@ import { bem } from "../utils/bem.js";
 declare module "react" {
   interface CSSProperties {
     "--rmd-app-bar-height"?: string | number;
-    "--rmd-app-bar-background-color"?: string;
-    "--rmd-app-bar-color"?: string;
     "--rmd-app-bar-surface-background-color"?: string;
     "--rmd-app-bar-surface-color"?: string;
   }

package/src/autocomplete/types.ts

@@ -37,6 +37,23 @@ import {
   type UseStateInitializer,
 } from "../types.js";
 
+// NOTE: The augmentation appears in this file since both
+// the `Autocomplete` and `autocompleteStyles` import this
+// file. The augmentation only works if a type definition
+// exists in the compiled `*.d.ts`
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-autocomplete-clear-button-size"?: string;
+    "--rmd-autocomplete-dropdown-button-size"?: string;
+    "--rmd-autocomplete-circular-progress-size"?: string;
+    "--rmd-autocomplete-inline-gap"?: string;
+    "--rmd-autocomplete-inline-min-width"?: string;
+    "--rmd-autocomplete-addon-gap"?: string;
+    "--rmd-autocomplete-gap-count"?: string;
+    "--rmd-autocomplete-addon-spacing"?: string;
+  }
+}
+
 /**
  * If a autocomplete value is one of these types, no additional code is required
  * to display a label in the input/chip for the autocomplete once the value has

package/src/avatar/Avatar.tsx

@@ -8,17 +8,6 @@ import {
 import { type PropsWithRef } from "../types.js";
 import { type AvatarClassNameOptions, avatar, avatarImage } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-avatar-background-color"?: string;
-    "--rmd-avatar-color"?: string;
-    "--rmd-avatar-border-color"?: string;
-    "--rmd-avatar-border-radius"?: string | number;
-    "--rmd-avatar-size"?: string | number;
-    "--rmd-avatar-font-size"?: string | number;
-  }
-}
-
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
 /**

package/src/avatar/styles.ts

@@ -4,6 +4,17 @@ import { type ThemeColor, cssUtils } from "../cssUtils.js";
 import { type OverridableStringUnion } from "../types.js";
 import { bem } from "../utils/bem.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-avatar-background-color"?: string;
+    "--rmd-avatar-color"?: string;
+    "--rmd-avatar-border-color"?: string;
+    "--rmd-avatar-border-radius"?: string | number;
+    "--rmd-avatar-size"?: string | number;
+    "--rmd-avatar-font-size"?: string | number;
+  }
+}
+
 const styles = bem("rmd-avatar");
 
 /**

package/src/badge/Badge.tsx

@@ -2,6 +2,18 @@ import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
 import { type BadgeTheme, badge } from "./styles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-badge-border-radius"?: string | number;
+    "--rmd-badge-greyscale-background-color"?: string;
+    "--rmd-badge-greyscale-color"?: string;
+    "--rmd-badge-size"?: string | number;
+    "--rmd-badge-offset"?: string | number;
+    "--rmd-badge-offset-top"?: string | number;
+    "--rmd-badge-offset-right"?: string | number;
+  }
+}
+
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /** @defaultValue `"greyscale"` */
   theme?: BadgeTheme;

package/src/badge/styles.ts

@@ -3,15 +3,6 @@ import { cnb } from "cnbuilder";
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-badge-size"?: string | number;
-    "--rmd-badge-offset"?: string | number;
-    "--rmd-badge-offset-top"?: string | number;
-    "--rmd-badge-offset-right"?: string | number;
-  }
-}
-
 const styles = bem("rmd-badge");
 
 /**

package/src/box/styles.ts

@@ -11,16 +11,25 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-box-gap"?: string | number;
     "--rmd-box-padding"?: string | number;
+    "--rmd-box-padding-h"?: string | number;
+    "--rmd-box-padding-v"?: string | number;
     "--rmd-box-item-min-size"?: string | number;
+    "--rmd-box-item-min-height"?: string | number;
     "--rmd-box-columns"?: string | number;
+    "--rmd-box-row-max-height"?: string;
+    "--rmd-box-auto-rows-height"?: string;
     "--rmd-box-phone-columns"?: number | string;
+    "--rmd-box-phone-item-min-height"?: number | string;
     "--rmd-box-phone-item-min-size"?: number | string;
     "--rmd-box-tablet-columns"?: number | string;
     "--rmd-box-tablet-item-min-size"?: number | string;
+    "--rmd-box-tablet-item-min-height"?: number | string;
     "--rmd-box-desktop-columns"?: number | string;
     "--rmd-box-desktop-item-min-size"?: number | string;
+    "--rmd-box-desktop-item-min-height"?: number | string;
     "--rmd-box-large-desktop-columns"?: number | string;
     "--rmd-box-large-desktop-item-min-size"?: number | string;
+    "--rmd-box-large-desktop-item-min-height"?: number | string;
   }
 }
 

package/src/button/styles.ts

@@ -19,8 +19,12 @@ declare module "react" {
     "--rmd-button-text-vertical-padding"?: string | number;
     "--rmd-button-text-min-height"?: string | number;
     "--rmd-button-text-min-width"?: string | number;
+    "--rmd-button-text-border-radius"?: string | number;
     "--rmd-button-icon-size"?: string | number;
-    "--rmd-button-icon-radius"?: string | number;
+    "--rmd-button-icon-padding"?: string | number;
+    "--rmd-button-icon-font-size"?: string | number;
+    "--rmd-button-icon-border-radius"?: string | number;
+    "--rmd-button-icon-square-border-radius"?: string | number;
   }
 }
 

package/src/card/Card.tsx

@@ -4,14 +4,6 @@ import { Box } from "../box/Box.js";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions, card } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-card-background-color"?: string;
-    "--rmd-card-color"?: string;
-    "--rmd-card-secondary-color"?: string;
-  }
-}
-
 /**
  * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
  * deprecated `raiseable` prop