@react-md/core 6.2.1 → 6.3.1

package/dist/tabs/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n  scrollButtons: TabListScrollButtonsBehavior;\n  activationMode: TabListActivationMode;\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  showScrollButtons: boolean;\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n  const { isPhone } = useAppSize();\n  const isScrollObserverEnabled =\n    scrollButtons === \"auto\" ||\n    (scrollButtons === \"auto-tablet-or-above\" && !isPhone);\n  const [autoScrollButtons, setAutoScrollButtons] = useState(false);\n  const showScrollButtons =\n    scrollButtons === true ||\n    (scrollButtons === \"tablet-or-above\" && !isPhone) ||\n    (isScrollObserverEnabled && autoScrollButtons);\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition && !isScrollObserverEnabled,\n    disableHeight: disableTransition && !isScrollObserverEnabled && !vertical,\n    disableWidth: disableTransition && !isScrollObserverEnabled && vertical,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching\n        // between RTL or when the scroll buttons appear, but they aren't\n        // required for any styles. Just reference them so that the hooks\n        // eslint rule doesn't show a warning...\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        isRTL;\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        showScrollButtons;\n\n        if (isScrollObserverEnabled && nodeRef.current) {\n          setAutoScrollButtons(\n            nodeRef.current.scrollWidth > nodeRef.current.offsetWidth\n          );\n        }\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab || disableTransition) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [\n        activeIndex,\n        disableTransition,\n        isRTL,\n        isScrollObserverEnabled,\n        nodeRef,\n        showScrollButtons,\n        vertical,\n      ]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n      disableTransition,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n      disableTransition,\n    },\n    movementContext,\n    showScrollButtons,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useAppSize","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","isPhone","isScrollObserverEnabled","autoScrollButtons","setAutoScrollButtons","showScrollButtons","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","disableHeight","disableWidth","onUpdate","entry","current","scrollWidth","offsetWidth","activeTab","target","size","offsetHeight","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}
+{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n  scrollButtons: TabListScrollButtonsBehavior;\n  activationMode: TabListActivationMode;\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  showScrollButtons: boolean;\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n  const { isPhone } = useAppSize();\n  const isScrollObserverEnabled =\n    scrollButtons === \"auto\" ||\n    (scrollButtons === \"auto-tablet-or-above\" && !isPhone);\n  const [autoScrollButtons, setAutoScrollButtons] = useState(false);\n  const showScrollButtons =\n    scrollButtons === true ||\n    (scrollButtons === \"tablet-or-above\" && !isPhone) ||\n    (isScrollObserverEnabled && autoScrollButtons);\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition && !isScrollObserverEnabled,\n    disableHeight: disableTransition && !isScrollObserverEnabled && !vertical,\n    disableWidth: disableTransition && !isScrollObserverEnabled && vertical,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching\n        // between RTL or when the scroll buttons appear, but they aren't\n        // required for any styles. Just reference them so that the hooks\n        // eslint rule doesn't show a warning...\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        isRTL;\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        showScrollButtons;\n\n        if (isScrollObserverEnabled && nodeRef.current) {\n          setAutoScrollButtons(\n            nodeRef.current.scrollWidth > nodeRef.current.offsetWidth\n          );\n        }\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab || disableTransition) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [\n        activeIndex,\n        disableTransition,\n        isRTL,\n        isScrollObserverEnabled,\n        nodeRef,\n        showScrollButtons,\n        vertical,\n      ]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    ref: tabListRef,\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n      disableTransition,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n      disableTransition,\n    },\n    movementContext,\n    showScrollButtons,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useAppSize","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","isPhone","isScrollObserverEnabled","autoScrollButtons","setAutoScrollButtons","showScrollButtons","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","disableHeight","disableWidth","onUpdate","entry","current","scrollWidth","offsetWidth","activeTab","target","size","offsetHeight","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}

package/dist/test-utils/drag.d.ts

@@ -1,19 +1,16 @@
-interface XYCoords {
-    x: number;
-    y: number;
-}
+import { type Point } from "../types.js";
 interface BaseDragOptions {
-    to?: XYCoords | Element;
-    from?: XYCoords;
-    delta?: XYCoords;
+    to?: Point | Element;
+    from?: Point;
+    delta?: Point;
     steps?: number;
     duration?: number;
 }
 type DragOptions = BaseDragOptions & ({
-    to: XYCoords | Element;
+    to: Point | Element;
     delta?: never;
 } | {
-    delta: XYCoords;
+    delta: Point;
     to?: never;
 });
 /**

package/dist/test-utils/mocks/IntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/mocks/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : (options.threshold ?? []);\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GAClBH,QAAQG,SAAS,IAAI,EAAE;QAE9B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}
+{"version":3,"sources":["../../../src/test-utils/mocks/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : (options.threshold ?? []);\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCA,YACE,AAAOhB,QAAsC,EAC7CiB,UAAoC,CAAC,CAAC,CACtC;;QATFH,uBAAAA,QAAAA,KAAAA;QACAI,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEArB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGG,QAAQH,IAAI,IAAI;QAC5B,IAAI,CAACI,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GAClBH,QAAQG,SAAS,IAAI,EAAE;QAE9B,IAAI,CAACtB,QAAQ,GAAG,IAAIuB;IACtB;AA8BF"}

package/dist/test-utils/mocks/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/mocks/ResizeObserver.ts"],"sourcesContent":["import {\n  type ResizeObserverManager,\n  resizeObserverManager,\n} from \"../../useResizeObserver.js\";\nimport {\n  type GetResizeObserverEntryMock,\n  type ResizeObserverEntrySize,\n  createResizeObserverEntry,\n} from \"../utils/createResizeObserverEntry.js\";\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example Main Usage\n   * ```tsx\n   * import {\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n   * import { ExampleComponent } from \"../ExampleComponent.js\";\n   *\n   * // choose your test framework\n   * import { afterEach, cleanupResizeObserverAfterEach, jest } from \"@jest/globals\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * import { afterEach, cleanupResizeObserverAfterEach, vitest } from \"vitest\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     // expect resize changes\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SetupResizeObserverMockOptions {\n  /**\n   * Set this to `true` to mimic the real `ResizeObserver` behavior where the\n   * updates occur after an animation frame instead of invoking immediately.\n   *\n   * Keeping this as `false` is recommended since this option was only added to\n   * make testing this function itself easier.\n   *\n   * @defaultValue `false`\n   */\n  raf?: boolean;\n\n  /**\n   * Keeping this as the `resizeObserverManager` is recommended since this\n   * option was only added to make testing this function easier itself.\n   *\n   * @defaultValue `resizeObserverManager`\n   */\n  manager?: ResizeObserverManager;\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @example Main Usage\n * ```tsx\n * import {\n *   cleanupResizeObserverAfterEach,\n *   render,\n *   screen,\n *   setupResizeObserverMock,\n * } from \"@react-md/core/test-utils\";\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState } from \"react\";\n *\n * // choose your test framework\n * import { afterEach, jest } from \"@jest/globals\";\n * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);\n *\n * import { afterEach, vitest } from \"vitest\";\n * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);\n *\n * function ExampleComponent() {\n *   const [size, setSize] = useState({ height: 0, width: 0 });\n *   const ref = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       setSize({\n *         height: entry.contentRect.height,\n *         width: entry.contentRect.width,\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <>\n *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n *       <div data-testid=\"resize-target\" ref={ref} />\n *     </>\n *   );\n * }\n *\n * describe(\"ExampleComponent\", () => {\n *   it(\"should do stuff\", () => {\n *     const observer = setupResizeObserverMock();\n *     render(<ExampleComponent />);\n *\n *     const size = screen.getByTestId(\"size\");\n *     const resizeTarget = screen.getByTestId(\"resize-target\");\n *\n *     // jsdom sets all element sizes to 0 by default\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n *\n *     // you can trigger with a custom change\n *     act(() => {\n *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n *\n *     // or you can mock the `getBoundingClientRect` result\n *     jest.spyOn(resizeTarget, \"getBoundingClientRect\").mockReturnValue({\n *       ...document.body.getBoundingClientRect(),\n *       height: 200,\n *       width: 200,\n *     });\n *\n *     act(() => {\n *       observer.resizeElement(resizeTarget);\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function setupResizeObserverMock(\n  options: SetupResizeObserverMockOptions = {}\n): ResizeObserverMock {\n  const { raf, manager = resizeObserverManager } = options;\n\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n}\n\n/**\n * @see {@link setupResizeObserverMock}\n * @since 6.0.0\n * @internal\n */\nexport function cleanupRO(\n  afterEach: (callback: () => void) => void,\n  restoreAllMocks: () => void = () => {}\n): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n    restoreAllMocks();\n  });\n}\n"],"names":["resizeObserverManager","createResizeObserverEntry","ResizeObserverMock","constructor","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","target","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","options","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupRO","afterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":";;;;;;;;;;;;;AAAA,SAEEA,qBAAqB,QAChB,6BAA6B;AACpC,SAGEC,yBAAyB,QACpB,wCAAwC;AAE/C;;;;;;CAMC,GACD,OAAO,MAAMC;IAGXC,YAAY,AAAOC,QAAgC,CAAE;;QAFrDC,uBAAAA,YAAAA,KAAAA;QAMAC,uBAAAA,WAAAA,KAAAA;QAKAC,uBAAAA,aAAAA,KAAAA;QAIAC,uBAAAA,cAAAA,KAAAA;QAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCC,GACDC,uBAAAA,iBAAAA,KAAAA;QAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CC,GACDC,uBAAAA,qBAAAA,KAAAA;aA5HmBN,WAAAA;aAInBE,UAAU,CAACK;YACT,IAAI,CAACN,QAAQ,CAACO,GAAG,CAACD;YAClB,IAAI,CAACD,iBAAiB,CAACT;QACzB;aAEAM,YAAY,CAACI;YACX,IAAI,CAACN,QAAQ,CAACQ,MAAM,CAACF;QACvB;aAEAH,aAAa;YACX,IAAI,CAACH,QAAQ,CAACS,KAAK;QACrB;aAqCAL,gBAAgB,CACdE,QACAI,oBAG0Bd,yBAAyB;YAEnD,IAAI,CAAC,IAAI,CAACI,QAAQ,CAACW,GAAG,CAACL,SAAS;gBAC9B,MAAM,IAAIM,MACR;YAEJ;YAEA,IAAIC;YACJ,IAAI,OAAOH,sBAAsB,YAAY;gBAC3CG,QAAQH,kBAAkBJ;YAC5B,OAAO,IAAI,CAAE,CAAA,iBAAiBI,iBAAgB,GAAI;gBAChDG,QAAQjB,0BAA0BU,QAAQI;YAC5C,OAAO;gBACLG,QAAQH;YACV;YAEA,IAAI,CAACX,QAAQ,CAAC;gBAACc;aAAM,EAAE,IAAI;QAC7B;aAiDAR,oBAAoB,CAACS,WAAWlB,yBAAyB;YACvD,MAAMmB,UAAU;mBAAI,IAAI,CAACf,QAAQ;aAAC,CAACgB,GAAG,CAAC,CAACC,UAAYH,SAASG;YAC7D,IAAI,CAAClB,QAAQ,CAACgB,SAAS,IAAI;QAC7B;QA9HE,IAAI,CAACf,QAAQ,GAAG,IAAIkB;IACtB;AA8HF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,GACD,OAAO,SAASC,wBACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,GAAG,EAAEC,UAAU3B,qBAAqB,EAAE,GAAGyB;IAEjD,MAAMG,iBAAiB,IAAI1B,mBAAmB,CAACkB;QAC7C,IAAIM,KAAK;YACPG,OAAOC,oBAAoB,CAACH,QAAQI,KAAK;YACzCJ,QAAQI,KAAK,GAAGF,OAAOG,qBAAqB,CAAC;gBAC3CL,QAAQM,mBAAmB,CAACb;YAC9B;QACF,OAAO;YACLO,QAAQM,mBAAmB,CAACb;QAC9B;IACF;IACAO,QAAQO,cAAc,GAAGN;IACzB,OAAOA;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASO,UACdC,SAAyC,EACzCC,kBAA8B,KAAO,CAAC;IAEtCD,UAAU;QACRpC,sBAAsB+B,KAAK,GAAG;QAC9B/B,sBAAsBsC,aAAa,GAAG,IAAIC;QAC1CvC,sBAAsBkC,cAAc,GAAGM;QACvCH;IACF;AACF"}
+{"version":3,"sources":["../../../src/test-utils/mocks/ResizeObserver.ts"],"sourcesContent":["import {\n  type ResizeObserverManager,\n  resizeObserverManager,\n} from \"../../useResizeObserver.js\";\nimport {\n  type GetResizeObserverEntryMock,\n  type ResizeObserverEntrySize,\n  createResizeObserverEntry,\n} from \"../utils/createResizeObserverEntry.js\";\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example Main Usage\n   * ```tsx\n   * import {\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n   * import { ExampleComponent } from \"../ExampleComponent.js\";\n   *\n   * // choose your test framework\n   * import { afterEach, cleanupResizeObserverAfterEach, jest } from \"@jest/globals\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * import { afterEach, cleanupResizeObserverAfterEach, vitest } from \"vitest\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     // expect resize changes\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SetupResizeObserverMockOptions {\n  /**\n   * Set this to `true` to mimic the real `ResizeObserver` behavior where the\n   * updates occur after an animation frame instead of invoking immediately.\n   *\n   * Keeping this as `false` is recommended since this option was only added to\n   * make testing this function itself easier.\n   *\n   * @defaultValue `false`\n   */\n  raf?: boolean;\n\n  /**\n   * Keeping this as the `resizeObserverManager` is recommended since this\n   * option was only added to make testing this function easier itself.\n   *\n   * @defaultValue `resizeObserverManager`\n   */\n  manager?: ResizeObserverManager;\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @example Main Usage\n * ```tsx\n * import {\n *   cleanupResizeObserverAfterEach,\n *   render,\n *   screen,\n *   setupResizeObserverMock,\n * } from \"@react-md/core/test-utils\";\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState } from \"react\";\n *\n * // choose your test framework\n * import { afterEach, jest } from \"@jest/globals\";\n * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);\n *\n * import { afterEach, vitest } from \"vitest\";\n * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);\n *\n * function ExampleComponent() {\n *   const [size, setSize] = useState({ height: 0, width: 0 });\n *   const ref = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       setSize({\n *         height: entry.contentRect.height,\n *         width: entry.contentRect.width,\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <>\n *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n *       <div data-testid=\"resize-target\" ref={ref} />\n *     </>\n *   );\n * }\n *\n * describe(\"ExampleComponent\", () => {\n *   it(\"should do stuff\", () => {\n *     const observer = setupResizeObserverMock();\n *     render(<ExampleComponent />);\n *\n *     const size = screen.getByTestId(\"size\");\n *     const resizeTarget = screen.getByTestId(\"resize-target\");\n *\n *     // jsdom sets all element sizes to 0 by default\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n *\n *     // you can trigger with a custom change\n *     act(() => {\n *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n *\n *     // or you can mock the `getBoundingClientRect` result\n *     jest.spyOn(resizeTarget, \"getBoundingClientRect\").mockReturnValue({\n *       ...document.body.getBoundingClientRect(),\n *       height: 200,\n *       width: 200,\n *     });\n *\n *     act(() => {\n *       observer.resizeElement(resizeTarget);\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function setupResizeObserverMock(\n  options: SetupResizeObserverMockOptions = {}\n): ResizeObserverMock {\n  const { raf, manager = resizeObserverManager } = options;\n\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n}\n\n/**\n * @see {@link setupResizeObserverMock}\n * @since 6.0.0\n * @internal\n */\nexport function cleanupRO(\n  afterEach: (callback: () => void) => void,\n  restoreAllMocks: () => void = () => {}\n): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n    restoreAllMocks();\n  });\n}\n"],"names":["resizeObserverManager","createResizeObserverEntry","ResizeObserverMock","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","target","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","options","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupRO","afterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":";;;;;;;;;;;;;AAAA,SAEEA,qBAAqB,QAChB,6BAA6B;AACpC,SAGEC,yBAAyB,QACpB,wCAAwC;AAE/C;;;;;;CAMC,GACD,OAAO,MAAMC;IAGX,YAAY,AAAOC,QAAgC,CAAE;;QAFrDC,uBAAAA,YAAAA,KAAAA;QAMAC,uBAAAA,WAAAA,KAAAA;QAKAC,uBAAAA,aAAAA,KAAAA;QAIAC,uBAAAA,cAAAA,KAAAA;QAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCC,GACDC,uBAAAA,iBAAAA,KAAAA;QAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CC,GACDC,uBAAAA,qBAAAA,KAAAA;aA5HmBN,WAAAA;aAInBE,UAAU,CAACK;YACT,IAAI,CAACN,QAAQ,CAACO,GAAG,CAACD;YAClB,IAAI,CAACD,iBAAiB,CAACR;QACzB;aAEAK,YAAY,CAACI;YACX,IAAI,CAACN,QAAQ,CAACQ,MAAM,CAACF;QACvB;aAEAH,aAAa;YACX,IAAI,CAACH,QAAQ,CAACS,KAAK;QACrB;aAqCAL,gBAAgB,CACdE,QACAI,oBAG0Bb,yBAAyB;YAEnD,IAAI,CAAC,IAAI,CAACG,QAAQ,CAACW,GAAG,CAACL,SAAS;gBAC9B,MAAM,IAAIM,MACR;YAEJ;YAEA,IAAIC;YACJ,IAAI,OAAOH,sBAAsB,YAAY;gBAC3CG,QAAQH,kBAAkBJ;YAC5B,OAAO,IAAI,CAAE,CAAA,iBAAiBI,iBAAgB,GAAI;gBAChDG,QAAQhB,0BAA0BS,QAAQI;YAC5C,OAAO;gBACLG,QAAQH;YACV;YAEA,IAAI,CAACX,QAAQ,CAAC;gBAACc;aAAM,EAAE,IAAI;QAC7B;aAiDAR,oBAAoB,CAACS,WAAWjB,yBAAyB;YACvD,MAAMkB,UAAU;mBAAI,IAAI,CAACf,QAAQ;aAAC,CAACgB,GAAG,CAAC,CAACC,UAAYH,SAASG;YAC7D,IAAI,CAAClB,QAAQ,CAACgB,SAAS,IAAI;QAC7B;QA9HE,IAAI,CAACf,QAAQ,GAAG,IAAIkB;IACtB;AA8HF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,GACD,OAAO,SAASC,wBACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,GAAG,EAAEC,UAAU1B,qBAAqB,EAAE,GAAGwB;IAEjD,MAAMG,iBAAiB,IAAIzB,mBAAmB,CAACiB;QAC7C,IAAIM,KAAK;YACPG,OAAOC,oBAAoB,CAACH,QAAQI,KAAK;YACzCJ,QAAQI,KAAK,GAAGF,OAAOG,qBAAqB,CAAC;gBAC3CL,QAAQM,mBAAmB,CAACb;YAC9B;QACF,OAAO;YACLO,QAAQM,mBAAmB,CAACb;QAC9B;IACF;IACAO,QAAQO,cAAc,GAAGN;IACzB,OAAOA;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASO,UACdC,SAAyC,EACzCC,kBAA8B,KAAO,CAAC;IAEtCD,UAAU;QACRnC,sBAAsB8B,KAAK,GAAG;QAC9B9B,sBAAsBqC,aAAa,GAAG,IAAIC;QAC1CtC,sBAAsBiC,cAAc,GAAGM;QACvCH;IACF;AACF"}

package/dist/test-utils/utils/createFileList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/utils/createFileList.ts"],"sourcesContent":["/**\n * @see https://github.com/testing-library/user-event/blob/d42954be66484bcf78486a298cc37f8a7c9e4bea/src/utils/dataTransfer/FileList.ts\n */\nexport function createFileList(\n  window: Window & typeof globalThis,\n  fileOrFiles: File | readonly File[]\n): FileList & Iterable<File> {\n  const files = Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles];\n  const fileList: FileList & Iterable<File> = {\n    ...files,\n    length: files.length,\n    item: (index) => fileList[index],\n    // needs to be `any` to match the FileList definition\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [Symbol.iterator]: function* nextFile(): Generator<File, any, any> {\n      for (let i = 0; i < fileList.length; i++) {\n        yield fileList[i];\n      }\n    },\n  };\n  fileList.constructor = window.FileList;\n  if (window.FileList) {\n    Object.setPrototypeOf(fileList, window.FileList.prototype);\n  }\n  Object.freeze(fileList);\n  return fileList;\n}\n"],"names":["createFileList","window","fileOrFiles","files","Array","isArray","fileList","length","item","index","Symbol","iterator","nextFile","i","constructor","FileList","Object","setPrototypeOf","prototype","freeze"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,eACdC,MAAkC,EAClCC,WAAmC;IAEnC,MAAMC,QAAQC,MAAMC,OAAO,CAACH,eAAeA,cAAc;QAACA;KAAY;IACtE,MAAMI,WAAsC;QAC1C,GAAGH,KAAK;QACRI,QAAQJ,MAAMI,MAAM;QACpBC,MAAM,CAACC,QAAUH,QAAQ,CAACG,MAAM;QAChC,qDAAqD;QACrD,8DAA8D;QAC9D,CAACC,OAAOC,QAAQ,CAAC,EAAE,UAAUC;YAC3B,IAAK,IAAIC,IAAI,GAAGA,IAAIP,SAASC,MAAM,EAAEM,IAAK;gBACxC,MAAMP,QAAQ,CAACO,EAAE;YACnB;QACF;IACF;IACAP,SAASQ,WAAW,GAAGb,OAAOc,QAAQ;IACtC,IAAId,OAAOc,QAAQ,EAAE;QACnBC,OAAOC,cAAc,CAACX,UAAUL,OAAOc,QAAQ,CAACG,SAAS;IAC3D;IACAF,OAAOG,MAAM,CAACb;IACd,OAAOA;AACT"}
+{"version":3,"sources":["../../../src/test-utils/utils/createFileList.ts"],"sourcesContent":["/**\n * @see https://github.com/testing-library/user-event/blob/d42954be66484bcf78486a298cc37f8a7c9e4bea/src/utils/dataTransfer/FileList.ts\n */\nexport function createFileList(\n  window: Window & typeof globalThis,\n  fileOrFiles: File | readonly File[]\n): FileList & Iterable<File> {\n  const files = Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles];\n  const fileList: FileList & Iterable<File> = {\n    ...files,\n    length: files.length,\n    item: (index) => fileList[index],\n    // needs to be `any` to match the FileList definition\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [Symbol.iterator]: function* nextFile(): Generator<File, any, any> {\n      for (let i = 0; i < fileList.length; i++) {\n        yield fileList[i];\n      }\n    },\n  };\n  fileList.constructor = window.FileList;\n  if (window.FileList) {\n    Object.setPrototypeOf(fileList, window.FileList.prototype);\n  }\n  Object.freeze(fileList);\n  return fileList;\n}\n"],"names":["createFileList","window","fileOrFiles","files","Array","isArray","fileList","length","item","index","Symbol","iterator","nextFile","i","FileList","Object","setPrototypeOf","prototype","freeze"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,eACdC,MAAkC,EAClCC,WAAmC;IAEnC,MAAMC,QAAQC,MAAMC,OAAO,CAACH,eAAeA,cAAc;QAACA;KAAY;IACtE,MAAMI,WAAsC;QAC1C,GAAGH,KAAK;QACRI,QAAQJ,MAAMI,MAAM;QACpBC,MAAM,CAACC,QAAUH,QAAQ,CAACG,MAAM;QAChC,qDAAqD;QACrD,8DAA8D;QAC9D,CAACC,OAAOC,QAAQ,CAAC,EAAE,UAAUC;YAC3B,IAAK,IAAIC,IAAI,GAAGA,IAAIP,SAASC,MAAM,EAAEM,IAAK;gBACxC,MAAMP,QAAQ,CAACO,EAAE;YACnB;QACF;IACF;IACAP,SAAS,WAAW,GAAGL,OAAOa,QAAQ;IACtC,IAAIb,OAAOa,QAAQ,EAAE;QACnBC,OAAOC,cAAc,CAACV,UAAUL,OAAOa,QAAQ,CAACG,SAAS;IAC3D;IACAF,OAAOG,MAAM,CAACZ;IACd,OAAOA;AACT"}

package/dist/theme/_theme.scss

@@ -396,7 +396,6 @@ $_validated_color_scheme: utils.validate(
 /// `get-var`, `set-var`, and `use-var` utils.
 /// @type List
 $theme-variables: (
-  inverse-color,
   background-color,
   on-background-color,
   surface-color,

package/dist/theme/getDerivedTheme.d.ts

@@ -1,27 +1,3 @@
 import { type ConfigurableThemeColors } from "./types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-background-color"?: string;
-        "--rmd-on-background-color"?: string;
-        "--rmd-surface-color"?: string;
-        "--rmd-primary-color"?: string;
-        "--rmd-on-primary-color"?: string;
-        "--rmd-secondary-color"?: string;
-        "--rmd-on-secondary-color"?: string;
-        "--rmd-warning-color"?: string;
-        "--rmd-on-warning-color"?: string;
-        "--rmd-error-color"?: string;
-        "--rmd-on-error-color"?: string;
-        "--rmd-success-color"?: string;
-        "--rmd-on-success-color"?: string;
-        "--rmd-text-primary-color"?: string;
-        "--rmd-text-secondary-color"?: string;
-        "--rmd-text-hint-color"?: string;
-        "--rmd-text-disabled-color"?: string;
-        "--rmd-outline-width"?: string | number;
-        "--rmd-outline-color"?: string;
-        "--rmd-outline-grey-color"?: string;
-    }
-}
 /** @since 6.0.0 */
 export declare const getDerivedTheme: (container?: Element) => Readonly<ConfigurableThemeColors>;

package/dist/theme/getDerivedTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/getDerivedTheme.ts"],"sourcesContent":["import {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { type ConfigurableThemeColors } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n"],"names":["backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","backgroundColor","getPropertyValue","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA,SACEA,kBAAkB,EAClBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjBC,mBAAmB,EACnBC,iBAAiB,EACjBC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,EACjBC,eAAe,EACfC,oBAAoB,EACpBC,gBAAgB,EAChBC,mBAAmB,EACnBC,qBAAqB,EACrBC,eAAe,QACV,eAAe;AA6BtB,iBAAiB,GACjB,OAAO,MAAMC,kBAAkB,CAC7BC,YAAqBC,SAASC,eAAe;IAE7C,MAAMC,aAAaC,OAAOC,gBAAgB,CAACL;IAC3C,MAAMM,kBAAkBH,WAAWI,gBAAgB,CAACvB;IACpD,MAAMwB,eAAeL,WAAWI,gBAAgB,CAAChB;IACjD,MAAMkB,iBAAiBN,WAAWI,gBAAgB,CAACpB;IACnD,MAAMuB,iBAAiBP,WAAWI,gBAAgB,CAACf;IACnD,MAAMmB,mBAAmBR,WAAWI,gBAAgB,CAACnB;IACrD,MAAMwB,eAAeT,WAAWI,gBAAgB,CAACT;IACjD,MAAMe,iBAAiBV,WAAWI,gBAAgB,CAACjB;IACnD,MAAMwB,aAAaX,WAAWI,gBAAgB,CAACtB;IAC/C,MAAM8B,eAAeZ,WAAWI,gBAAgB,CAACrB;IACjD,MAAM8B,eAAeb,WAAWI,gBAAgB,CAACd;IACjD,MAAMwB,iBAAiBd,WAAWI,gBAAgB,CAAClB;IACnD,MAAM6B,mBAAmBf,WAAWI,gBAAgB,CAACX;IACrD,MAAMuB,qBAAqBhB,WAAWI,gBAAgB,CAACV;IACvD,MAAMuB,gBAAgBjB,WAAWI,gBAAgB,CAACZ;IAClD,MAAM0B,oBAAoBlB,WAAWI,gBAAgB,CAACb;IAEtD,OAAO;QACLY;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/theme/getDerivedTheme.ts"],"sourcesContent":["import {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { type ConfigurableThemeColors } from \"./types.js\";\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n"],"names":["backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","backgroundColor","getPropertyValue","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA,SACEA,kBAAkB,EAClBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjBC,mBAAmB,EACnBC,iBAAiB,EACjBC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,EACjBC,eAAe,EACfC,oBAAoB,EACpBC,gBAAgB,EAChBC,mBAAmB,EACnBC,qBAAqB,EACrBC,eAAe,QACV,eAAe;AAGtB,iBAAiB,GACjB,OAAO,MAAMC,kBAAkB,CAC7BC,YAAqBC,SAASC,eAAe;IAE7C,MAAMC,aAAaC,OAAOC,gBAAgB,CAACL;IAC3C,MAAMM,kBAAkBH,WAAWI,gBAAgB,CAACvB;IACpD,MAAMwB,eAAeL,WAAWI,gBAAgB,CAAChB;IACjD,MAAMkB,iBAAiBN,WAAWI,gBAAgB,CAACpB;IACnD,MAAMuB,iBAAiBP,WAAWI,gBAAgB,CAACf;IACnD,MAAMmB,mBAAmBR,WAAWI,gBAAgB,CAACnB;IACrD,MAAMwB,eAAeT,WAAWI,gBAAgB,CAACT;IACjD,MAAMe,iBAAiBV,WAAWI,gBAAgB,CAACjB;IACnD,MAAMwB,aAAaX,WAAWI,gBAAgB,CAACtB;IAC/C,MAAM8B,eAAeZ,WAAWI,gBAAgB,CAACrB;IACjD,MAAM8B,eAAeb,WAAWI,gBAAgB,CAACd;IACjD,MAAMwB,iBAAiBd,WAAWI,gBAAgB,CAAClB;IACnD,MAAM6B,mBAAmBf,WAAWI,gBAAgB,CAACX;IACrD,MAAMuB,qBAAqBhB,WAAWI,gBAAgB,CAACV;IACvD,MAAMuB,gBAAgBjB,WAAWI,gBAAgB,CAACZ;IAClD,MAAM0B,oBAAoBlB,WAAWI,gBAAgB,CAACb;IAEtD,OAAO;QACLY;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}

package/dist/theme/types.d.ts

@@ -1,5 +1,30 @@
 import { type CSSProperties } from "react";
 import { type UseStateSetter } from "../types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-background-color"?: string;
+        "--rmd-on-background-color"?: string;
+        "--rmd-surface-color"?: string;
+        "--rmd-primary-color"?: string;
+        "--rmd-on-primary-color"?: string;
+        "--rmd-secondary-color"?: string;
+        "--rmd-on-secondary-color"?: string;
+        "--rmd-success-color"?: string;
+        "--rmd-on-success-color"?: string;
+        "--rmd-warning-color"?: string;
+        "--rmd-on-warning-color"?: string;
+        "--rmd-error-color"?: string;
+        "--rmd-on-error-color"?: string;
+        "--rmd-text-primary-color"?: string;
+        "--rmd-text-secondary-color"?: string;
+        "--rmd-text-hint-color"?: string;
+        "--rmd-text-disabled-color"?: string;
+        "--rmd-outline-width"?: string | number;
+        "--rmd-outline-color"?: string;
+        "--rmd-outline-grey-color"?: string;
+        "--rmd-inverse-color"?: string;
+    }
+}
 /**
  * @since 6.0.0
  */

package/dist/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/types.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariableName = `--${string}`;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type DefinedCustomProperty<Property = keyof CSSProperties> =\n  Property extends CSSVariableName ? Property : never;\n\n/**\n * This is a utility type that can be used to auto-complete and type-check css\n * variables that are defined through module augmentation.\n *\n * ```ts\n * declare module \"react\" {\n *   interface CSSProperties {\n *     \"--custom-property\"?: number | string;\n *   }\n * }\n *\n * // will no longer throw a type error. also the `--custom-property` will\n * // appear as an auto-complete item\n * const style: CSSProperties = {\n *   \"--custom-property\": \"red\",\n * };\n *\n * // `DefinedCSSVariableName` will also include `--custom-property` with all\n * // defined react-md custom properties\n * ```\n *\n * @since 6.0.0\n */\nexport type DefinedCSSVariableName = DefinedCustomProperty;\n\n/**\n * @since 6.0.0\n */\nexport interface CSSVariable<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> {\n  name: Name;\n  value: string | number;\n}\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariablesProperties<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = {\n  [key in Name]?: string | number;\n};\n\n/**\n * @since 6.0.0\n */\nexport type ReadonlyCSSVariableList<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = readonly Readonly<CSSVariable<Name>>[];\n\n/** @since 6.0.0 */\nexport type LightDarkColorScheme = \"light\" | \"dark\";\n\n/** @since 6.0.0 */\nexport type ColorScheme = LightDarkColorScheme | \"system\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeState {\n  /**\n   * The defined color scheme for the app that should match the `$color-scheme`\n   * SCSS variable.\n   */\n  colorScheme: ColorScheme;\n  setColorScheme: UseStateSetter<ColorScheme>;\n}\n\n/** @since 6.0.0 */\nexport interface ColorSchemeContext extends ColorSchemeState {\n  /**\n   * When the {@link colorScheme} is set to `\"system\"`, this can be used to\n   * determine if the user prefers the `\"light\"` or `\"dark\"` color scheme so\n   * that custom styles can be set for that preference.\n   */\n  currentColor: LightDarkColorScheme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme } from \"@react-md/core/theme/getDerivedTheme\"\n   * import { useTheme } from \"@react-md/core/theme/ThemeProvider\";\n   * import { useHtmlClassName } from \"@react-md/core/useHtmlClassName\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n"],"names":[],"mappings":"AA6HA,iBAAiB,GACjB,WAkCC"}
+{"version":3,"sources":["../../src/theme/types.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n    \"--rmd-inverse-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariableName = `--${string}`;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type DefinedCustomProperty<Property = keyof CSSProperties> =\n  Property extends CSSVariableName ? Property : never;\n\n/**\n * This is a utility type that can be used to auto-complete and type-check css\n * variables that are defined through module augmentation.\n *\n * ```ts\n * declare module \"react\" {\n *   interface CSSProperties {\n *     \"--custom-property\"?: number | string;\n *   }\n * }\n *\n * // will no longer throw a type error. also the `--custom-property` will\n * // appear as an auto-complete item\n * const style: CSSProperties = {\n *   \"--custom-property\": \"red\",\n * };\n *\n * // `DefinedCSSVariableName` will also include `--custom-property` with all\n * // defined react-md custom properties\n * ```\n *\n * @since 6.0.0\n */\nexport type DefinedCSSVariableName = DefinedCustomProperty;\n\n/**\n * @since 6.0.0\n */\nexport interface CSSVariable<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> {\n  name: Name;\n  value: string | number;\n}\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariablesProperties<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = {\n  [key in Name]?: string | number;\n};\n\n/**\n * @since 6.0.0\n */\nexport type ReadonlyCSSVariableList<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = readonly Readonly<CSSVariable<Name>>[];\n\n/** @since 6.0.0 */\nexport type LightDarkColorScheme = \"light\" | \"dark\";\n\n/** @since 6.0.0 */\nexport type ColorScheme = LightDarkColorScheme | \"system\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeState {\n  /**\n   * The defined color scheme for the app that should match the `$color-scheme`\n   * SCSS variable.\n   */\n  colorScheme: ColorScheme;\n  setColorScheme: UseStateSetter<ColorScheme>;\n}\n\n/** @since 6.0.0 */\nexport interface ColorSchemeContext extends ColorSchemeState {\n  /**\n   * When the {@link colorScheme} is set to `\"system\"`, this can be used to\n   * determine if the user prefers the `\"light\"` or `\"dark\"` color scheme so\n   * that custom styles can be set for that preference.\n   */\n  currentColor: LightDarkColorScheme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme } from \"@react-md/core/theme/getDerivedTheme\"\n   * import { useTheme } from \"@react-md/core/theme/ThemeProvider\";\n   * import { useHtmlClassName } from \"@react-md/core/useHtmlClassName\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n"],"names":[],"mappings":"AAuJA,iBAAiB,GACjB,WAkCC"}

package/dist/tooltip/Tooltip.d.ts

@@ -1,14 +1,6 @@
 import { type HTMLAttributes } from "react";
-import { type TextOverflow } from "../cssUtils.js";
-import { type SimplePosition } from "../positioning/types.js";
 import { type CSSTransitionClassNames, type CSSTransitionComponentProps, type SSRTransitionOptions, type TransitionActions, type TransitionTimeout } from "../transition/types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-tooltip-background-color"?: string;
-        "--rmd-tooltip-color"?: string;
-        "--rmd-tooltip-spacing"?: string | number;
-    }
-}
+import { type TooltipClassNameOptions } from "./styles.js";
 /**
  * The base props for the `Tooltip` component. This can be extended when
  * creating custom tooltip implementations.
@@ -18,36 +10,16 @@ declare module "react" {
  * @since 6.0.0 Removed `lineWrap` for `textOverflow`
  * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than
  * `portal` with the `disablePortal` prop.
+ * @since 6.3.1 Extends TooltipClassNameOptions for CSSProperties module
+ * augmentation.
  */
-export interface TooltipProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, SSRTransitionOptions, TransitionActions {
+export interface TooltipProps extends HTMLAttributes<HTMLSpanElement>, TooltipClassNameOptions, CSSTransitionComponentProps, SSRTransitionOptions, TransitionActions {
     visible: boolean;
-    /**
-     * Set this to `true` to use a smaller font size and padding on the tooltip
-     * and a smaller gap between the tooltip and tooltipped element.
-     *
-     * @defaultValue `false`
-     */
-    dense?: boolean;
-    /**
-     * @defaultValue `"below"`
-     */
-    position?: SimplePosition;
     /**
      * @see {@link CSSTransitionComponentProps.temporary}
      * @defaultValue `true`
      */
     temporary?: boolean;
-    /**
-     * Set this to `"nowrap"` for tooltips that are positioned near the edge of
-     * the viewport that have a position of `"above"` or `"below"` so that the
-     * tooltip no longer aligns to the center of the tooltipped element.
-     *
-     * Set this to `"ellipsis"` if the tooltip should only show a single line of
-     * text and ellipsis once it has reached the max tooltip width.
-     *
-     * @defaultValue `"allow"`
-     */
-    textOverflow?: TextOverflow;
     /**
      * @see {@link CSSTransitionComponentProps.timeout}
      * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`

package/dist/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type SSRTransitionOptions,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  DEFAULT_TOOLTIP_CLASSNAMES,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { tooltip } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n  }\n}\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @since 2.8.0 Supports the `RenderConditionalPortalProps`\n * @since 6.0.0 The `id` prop is optional.\n * @since 6.0.0 Removed `lineWrap` for `textOverflow`\n * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than\n * `portal` with the `disablePortal` prop.\n */\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    SSRTransitionOptions,\n    TransitionActions {\n  visible: boolean;\n\n  /**\n   * Set this to `true` to use a smaller font size and padding on the tooltip\n   * and a smaller gap between the tooltip and tooltipped element.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `\"below\"`\n   */\n  position?: SimplePosition;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n   * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n   * tooltip no longer aligns to the center of the tooltipped element.\n   *\n   * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n   * text and ellipsis once it has reached the max tooltip width.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.timeout}\n   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.classNames}\n   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n  function Tooltip(props, nodeRef) {\n    const {\n      id: propId,\n      dense,\n      visible,\n      children,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      timeout = DEFAULT_TOOLTIP_TIMEOUT,\n      classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n      className,\n      position = DEFAULT_TOOLTIP_POSITION,\n      temporary = true,\n      exitedHidden = !temporary,\n      textOverflow,\n      disablePortal: propDisablePortal,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"tooltip\");\n\n    const { rendered, elementProps, disablePortal } = useCSSTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: tooltip({\n        dense,\n        position,\n        className,\n        textOverflow,\n      }),\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,MAAM,QAAQ,sBAAsB;AAS7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAASC,OAAO,QAAQ,cAAc;AAuEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type SSRTransitionOptions,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  DEFAULT_TOOLTIP_CLASSNAMES,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { type TooltipClassNameOptions, tooltip } from \"./styles.js\";\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @since 2.8.0 Supports the `RenderConditionalPortalProps`\n * @since 6.0.0 The `id` prop is optional.\n * @since 6.0.0 Removed `lineWrap` for `textOverflow`\n * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than\n * `portal` with the `disablePortal` prop.\n * @since 6.3.1 Extends TooltipClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    TooltipClassNameOptions,\n    CSSTransitionComponentProps,\n    SSRTransitionOptions,\n    TransitionActions {\n  visible: boolean;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.timeout}\n   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.classNames}\n   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n  function Tooltip(props, nodeRef) {\n    const {\n      id: propId,\n      dense,\n      visible,\n      children,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      timeout = DEFAULT_TOOLTIP_TIMEOUT,\n      classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n      className,\n      position = DEFAULT_TOOLTIP_POSITION,\n      temporary = true,\n      exitedHidden = !temporary,\n      textOverflow,\n      disablePortal: propDisablePortal,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"tooltip\");\n\n    const { rendered, elementProps, disablePortal } = useCSSTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: tooltip({\n        dense,\n        position,\n        className,\n        textOverflow,\n      }),\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAQ7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAAuCC,OAAO,QAAQ,cAAc;AAyCpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}

package/dist/tooltip/styles.d.ts

@@ -1,12 +1,49 @@
 import { type TextOverflow } from "../cssUtils.js";
 import { type SimplePosition } from "../positioning/types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-tooltip-background-color"?: string;
+        "--rmd-tooltip-border-radius"?: string | number;
+        "--rmd-tooltip-color"?: string;
+        "--rmd-tooltip-spacing"?: string | number;
+        "--rmd-tooltip-z-index"?: string | number;
+        "--rmd-tooltip-horizontal-padding"?: string | number;
+        "--rmd-tooltip-vertical-padding"?: string | number;
+        "--rmd-tooltip-min-height"?: string | number;
+        "--rmd-tooltip-max-width"?: string | number;
+        "--rmd-tooltip-dense-horizontal-padding"?: string | number;
+        "--rmd-tooltip-dense-vertical-padding"?: string | number;
+        "--rmd-tooltip-dense-min-height"?: string | number;
+        "--rmd-tooltip-transition-distance"?: string | number;
+    }
+}
 /**
  * @since 6.0.0
+ * @since 6.3.1 Allow `position` to be optional
  */
 export interface TooltipClassNameOptions {
     className?: string;
+    /**
+     * Set this to `true` to use a smaller font size and padding on the tooltip
+     * and a smaller gap between the tooltip and tooltipped element.
+     *
+     * @defaultValue `false`
+     */
     dense?: boolean;
-    position: SimplePosition;
+    /**
+     * @defaultValue `"below"`
+     */
+    position?: SimplePosition;
+    /**
+     * Set this to `"nowrap"` for tooltips that are positioned near the edge of
+     * the viewport that have a position of `"above"` or `"below"` so that the
+     * tooltip no longer aligns to the center of the tooltipped element.
+     *
+     * Set this to `"ellipsis"` if the tooltip should only show a single line of
+     * text and ellipsis once it has reached the max tooltip width.
+     *
+     * @defaultValue `"allow"`
+     */
     textOverflow?: TextOverflow;
 }
 /**

package/dist/tooltip/styles.js

@@ -5,7 +5,7 @@ const styles = bem("rmd-tooltip");
 /**
  * @since 6.0.0
  */ export function tooltip(options) {
-    const { dense, position, className, textOverflow } = options;
+    const { dense, position = "below", className, textOverflow } = options;
     return cnb(styles({
         dense,
         [position]: true

package/dist/tooltip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextOverflow, cssUtils } from \"../cssUtils.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\n/**\n * @since 6.0.0\n */\nexport interface TooltipClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  position: SimplePosition;\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n  const { dense, position, className, textOverflow } = options;\n\n  return cnb(\n    styles({\n      dense,\n      [position]: true,\n    }),\n    cssUtils({ textOverflow }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA4BC,QAAQ,QAAQ,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAErD,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}
+{"version":3,"sources":["../../src/tooltip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextOverflow, cssUtils } from \"../cssUtils.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-border-radius\"?: string | number;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n    \"--rmd-tooltip-z-index\"?: string | number;\n    \"--rmd-tooltip-horizontal-padding\"?: string | number;\n    \"--rmd-tooltip-vertical-padding\"?: string | number;\n    \"--rmd-tooltip-min-height\"?: string | number;\n    \"--rmd-tooltip-max-width\"?: string | number;\n    \"--rmd-tooltip-dense-horizontal-padding\"?: string | number;\n    \"--rmd-tooltip-dense-vertical-padding\"?: string | number;\n    \"--rmd-tooltip-dense-min-height\"?: string | number;\n    \"--rmd-tooltip-transition-distance\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Allow `position` to be optional\n */\nexport interface TooltipClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to use a smaller font size and padding on the tooltip\n   * and a smaller gap between the tooltip and tooltipped element.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `\"below\"`\n   */\n  position?: SimplePosition;\n\n  /**\n   * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n   * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n   * tooltip no longer aligns to the center of the tooltipped element.\n   *\n   * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n   * text and ellipsis once it has reached the max tooltip width.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n  const { dense, position = \"below\", className, textOverflow } = options;\n\n  return cnb(\n    styles({\n      dense,\n      [position]: true,\n    }),\n    cssUtils({ textOverflow }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA4BC,QAAQ,QAAQ,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAqDnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,WAAW,OAAO,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAE/D,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}

package/dist/transition/SkeletonPlaceholder.d.ts

@@ -1,12 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { type SkeletonPlaceholderOptions } from "./useSkeletonPlaceholder.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-skeleton-placeholder-background-color"?: string;
-        "--rmd-skeleton-placeholder-height"?: string | number;
-        "--rmd-skeleton-placeholder-width"?: string | number;
-    }
-}
 /** @since 6.0.0 */
 export interface SkeletonPlaceholderProps extends HTMLAttributes<HTMLDivElement>, SkeletonPlaceholderOptions {
     /**

package/dist/transition/SkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type SkeletonPlaceholderOptions,\n  useSkeletonPlaceholder,\n} from \"./useSkeletonPlaceholder.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-skeleton-placeholder-background-color\"?: string;\n    \"--rmd-skeleton-placeholder-height\"?: string | number;\n    \"--rmd-skeleton-placeholder-width\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SkeletonPlaceholderOptions {\n  /**\n   * @defaultValue `!!children`\n   * @see {@link SkeletonPlaceholderOptions.disabled}\n   */\n  disabled?: boolean;\n\n  /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface ExampleProps {\n *   loading: boolean;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n *   if (loading) {\n *     return <SkeletonPlaceholder />;\n *   }\n *\n *   return <>{children}</>;\n * }\n * ```\n *\n * @example Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface Data {\n *   id: string;\n *   name: string;\n *   createdBy: string\n *   createdOn: string;\n *   modifiedBy: string;\n *   modifiedOn: string;\n * }\n *\n * function ShowData({\n *   id,\n *   name,\n *   createdBy,\n *   createdOn,\n *   modifiedBy,\n *   modifiedOn,\n * }: Partial<Data>:: ReactElement {\n *   const loading =\n *     !name &&\n *     !createdBy &&\n *     !createdOn &&\n *     !modifiedBy &&\n *     !modifiedOn;\n *\n *   return (\n *     <Box grid gridName=\"custom-class-name\">\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {id}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {name}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdBy}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedBy}\n *       </SkeletonPlaceholder>\n *     </Box>\n *   );\n * }\n *\n * export function Example(): ReactElement {\n *   const { data } = useLoadSomeDataQuery();\n *\n *   const items = useMemo(() => {\n *     // if the data has been fetched, just return the data\n *     if (data) {\n *       return data;\n *     }\n *\n *     // if the data does not exist, set up a skeleton of your layout by\n *     // rendering a random number of items.\n *     //\n *     // NOTE: This is memoized so you don't create a random length each\n *     // render\n *     const length = randomInt({ min: 3, max: 10 })\n *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n *   }, [data])\n *\n *   return (\n *     <List>\n *       {items.map((item) => <ShowData {...item} />)}\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n  HTMLDivElement,\n  SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n  const {\n    style,\n    className,\n    height,\n    width,\n    children,\n    disabled = !!children,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n    ...remaining\n  } = props;\n  const skeleton = useSkeletonPlaceholder({\n    disabled,\n    style,\n    className,\n    height,\n    width,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  });\n\n  return (\n    <div {...remaining} ref={ref} {...skeleton}>\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAEEC,sBAAsB,QACjB,8BAA8B;AAwBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type SkeletonPlaceholderOptions,\n  useSkeletonPlaceholder,\n} from \"./useSkeletonPlaceholder.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SkeletonPlaceholderOptions {\n  /**\n   * @defaultValue `!!children`\n   * @see {@link SkeletonPlaceholderOptions.disabled}\n   */\n  disabled?: boolean;\n\n  /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface ExampleProps {\n *   loading: boolean;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n *   if (loading) {\n *     return <SkeletonPlaceholder />;\n *   }\n *\n *   return <>{children}</>;\n * }\n * ```\n *\n * @example Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface Data {\n *   id: string;\n *   name: string;\n *   createdBy: string\n *   createdOn: string;\n *   modifiedBy: string;\n *   modifiedOn: string;\n * }\n *\n * function ShowData({\n *   id,\n *   name,\n *   createdBy,\n *   createdOn,\n *   modifiedBy,\n *   modifiedOn,\n * }: Partial<Data>:: ReactElement {\n *   const loading =\n *     !name &&\n *     !createdBy &&\n *     !createdOn &&\n *     !modifiedBy &&\n *     !modifiedOn;\n *\n *   return (\n *     <Box grid gridName=\"custom-class-name\">\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {id}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {name}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdBy}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedBy}\n *       </SkeletonPlaceholder>\n *     </Box>\n *   );\n * }\n *\n * export function Example(): ReactElement {\n *   const { data } = useLoadSomeDataQuery();\n *\n *   const items = useMemo(() => {\n *     // if the data has been fetched, just return the data\n *     if (data) {\n *       return data;\n *     }\n *\n *     // if the data does not exist, set up a skeleton of your layout by\n *     // rendering a random number of items.\n *     //\n *     // NOTE: This is memoized so you don't create a random length each\n *     // render\n *     const length = randomInt({ min: 3, max: 10 })\n *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n *   }, [data])\n *\n *   return (\n *     <List>\n *       {items.map((item) => <ShowData {...item} />)}\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n  HTMLDivElement,\n  SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n  const {\n    style,\n    className,\n    height,\n    width,\n    children,\n    disabled = !!children,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n    ...remaining\n  } = props;\n  const skeleton = useSkeletonPlaceholder({\n    disabled,\n    style,\n    className,\n    height,\n    width,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  });\n\n  return (\n    <div {...remaining} ref={ref} {...skeleton}>\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAEEC,sBAAsB,QACjB,8BAA8B;AAgBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}

package/dist/transition/Slide.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport {\n  DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n  useSlideTransition,\n} from \"./useSlideTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slide-duration\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface SlideProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * Set this to `true` to animate this slide into view within a\n   * `SlideContainer`. When this switches from `true` to `false`, it will\n   * animate out.\n   */\n  active: boolean;\n\n  /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n  timeout?: TransitionTimeout;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} for example usage.\n * @since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n  function Slide(props, nodeRef) {\n    const {\n      active,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      children,\n      timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n      temporary = false,\n      exitedHidden = true,\n      ...remaining\n    } = props;\n\n    const { rendered, elementProps } = useSlideTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      timeout,\n      temporary,\n      transitionIn: active,\n      exitedHidden,\n    });\n\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAOxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AAyBjC;;;;;;;;;CASC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport {\n  DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n  useSlideTransition,\n} from \"./useSlideTransition.js\";\n\n// NOTE: Tis is in both `useSlideTransition` and `Slide` since there are no\n// reusable types between these two files.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slide-duration\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface SlideProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * Set this to `true` to animate this slide into view within a\n   * `SlideContainer`. When this switches from `true` to `false`, it will\n   * animate out.\n   */\n  active: boolean;\n\n  /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n  timeout?: TransitionTimeout;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} for example usage.\n * @since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n  function Slide(props, nodeRef) {\n    const {\n      active,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      children,\n      timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n      temporary = false,\n      exitedHidden = true,\n      ...remaining\n    } = props;\n\n    const { rendered, elementProps } = useSlideTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      timeout,\n      temporary,\n      transitionIn: active,\n      exitedHidden,\n    });\n\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAOxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AA2BjC;;;;;;;;;CASC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}

package/dist/transition/skeletonPlaceholderUtils.d.ts

@@ -1,4 +1,11 @@
 import { type CSSProperties } from "react";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-skeleton-placeholder-background-color"?: string;
+        "--rmd-skeleton-placeholder-height"?: string | number;
+        "--rmd-skeleton-placeholder-width"?: string | number;
+    }
+}
 /**
  * @since 6.0.0
  */

package/dist/transition/skeletonPlaceholderUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\n/**\n * @since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n  /**\n   * The minimum `animation-delay` milliseconds allowed in the random generator.\n   * This value should be: `0 <= minDelay < maxDelay`.\n   *\n   * The `animation-delay` will be generated by:\n   * ```ts\n   * const delay = randomInt({\n   *   min: minDelay,\n   *   max: maxDelay,\n   * });\n   *\n   * return {\n   *   animationDelay: `-${delay}ms`,\n   * };\n   * ```\n   *\n   * @defaultValue `0`\n   */\n  minDelay?: number;\n\n  /**\n   * @see {@link minDelay}\n   * @defaultValue `400`\n   */\n  maxDelay?: number;\n\n  /**\n   * The minimum width percentage allowed in the random generator. This value\n   * should be: `0 >= minPercentage < maxPercentage`.\n   *\n   * The `width` will be generated by:\n   * ```ts\n   * const width = randomInt({\n   *   min: minPercentage,\n   *   max: maxPercentage,\n   * });\n   *\n   * return {\n   *   width: `${width}%`,\n   * };\n   * ```\n   * @defaultValue `40`\n   */\n  minPercentage?: number;\n\n  /**\n   * @see {@link minPercentage}\n   * @defaultValue `85`\n   */\n  maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import {\n *   randomSkeletonPlaceholder,\n *   skeletonPlaceholder,\n * } from \"@react-md/core/transition/skeletonPlaceholderUtils\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n *   return\n *     <div\n *       style={randomSkeletonPlaceholder()}\n *       className={skeletonPlaceholder()}\n *     />\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n  options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n  const {\n    minDelay = 0,\n    maxDelay = 400,\n    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n\n  return {\n    animationDelay: `-${randomInt({\n      min: minDelay,\n      max: maxDelay,\n    })}ms`,\n    width: `${randomInt({\n      min: minPercentage,\n      max: maxPercentage,\n    })}%`,\n  };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AAEA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,GAAGX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}
+{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-skeleton-placeholder-background-color\"?: string;\n    \"--rmd-skeleton-placeholder-height\"?: string | number;\n    \"--rmd-skeleton-placeholder-width\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n  /**\n   * The minimum `animation-delay` milliseconds allowed in the random generator.\n   * This value should be: `0 <= minDelay < maxDelay`.\n   *\n   * The `animation-delay` will be generated by:\n   * ```ts\n   * const delay = randomInt({\n   *   min: minDelay,\n   *   max: maxDelay,\n   * });\n   *\n   * return {\n   *   animationDelay: `-${delay}ms`,\n   * };\n   * ```\n   *\n   * @defaultValue `0`\n   */\n  minDelay?: number;\n\n  /**\n   * @see {@link minDelay}\n   * @defaultValue `400`\n   */\n  maxDelay?: number;\n\n  /**\n   * The minimum width percentage allowed in the random generator. This value\n   * should be: `0 >= minPercentage < maxPercentage`.\n   *\n   * The `width` will be generated by:\n   * ```ts\n   * const width = randomInt({\n   *   min: minPercentage,\n   *   max: maxPercentage,\n   * });\n   *\n   * return {\n   *   width: `${width}%`,\n   * };\n   * ```\n   * @defaultValue `40`\n   */\n  minPercentage?: number;\n\n  /**\n   * @see {@link minPercentage}\n   * @defaultValue `85`\n   */\n  maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import {\n *   randomSkeletonPlaceholder,\n *   skeletonPlaceholder,\n * } from \"@react-md/core/transition/skeletonPlaceholderUtils\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n *   return\n *     <div\n *       style={randomSkeletonPlaceholder()}\n *       className={skeletonPlaceholder()}\n *     />\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n  options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n  const {\n    minDelay = 0,\n    maxDelay = 400,\n    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n\n  return {\n    animationDelay: `-${randomInt({\n      min: minDelay,\n      max: maxDelay,\n    })}ms`,\n    width: `${randomInt({\n      min: minPercentage,\n      max: maxPercentage,\n    })}%`,\n  };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AAEA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAUlD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,GAAGX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}

package/dist/transition/useCarousel.d.ts

@@ -1,5 +1,5 @@
-import type { UseStateSetter } from "../types.js";
-import type { SlideDirection } from "./SlideContainer.js";
+import { type UseStateSetter } from "../types.js";
+import { type SlideDirection } from "./SlideContainer.js";
 /** @since 6.0.0 */
 export interface CarouselSlideState {
     direction: SlideDirection;