@react-md/core 6.2.1 → 6.3.1

package/dist/transition/useCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCarousel.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport type { UseStateSetter } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { loop } from \"../utils/loop.js\";\nimport type { SlideDirection } from \"./SlideContainer.js\";\n\n/** @since 6.0.0 */\nexport interface CarouselSlideState {\n  direction: SlideDirection;\n  activeIndex: number;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselState extends CarouselSlideState {\n  paused: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselImplementation extends CarouselState {\n  /**\n   * Increments the carousel slide active index by 1 ensuring it does not\n   * advance past the {@link CarouselOptions.totalSlides} index.\n   */\n  increment: () => void;\n\n  /**\n   * Decrements the carousel slide active index by 1 and prevents decrementing\n   * past 0.\n   */\n  decrement: () => void;\n\n  /**\n   * This can be used to manually control the {@link paused} state.\n   */\n  setPaused: UseStateSetter<boolean>;\n\n  /**\n   * Toggles the {@link paused} state.\n   */\n  togglePaused: () => void;\n\n  /**\n   * A convenience wrapper for the {@link setCarouselSlideState} that will\n   * ensure the {@link CarouselSlideState.direction} is correct based on the\n   * current active index and next active index.\n   */\n  setActiveIndex: UseStateSetter<number>;\n\n  /**\n   * This can be used if the provided carousel actions do not solve your use\n   * case.\n   */\n  setCarouselSlideState: UseStateSetter<CarouselSlideState>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CarouselOptions {\n  /**\n   * The amount of time in milliseconds each slide should be visible before\n   * advancing to the next slide.\n   *\n   * @defaultValue `8000`\n   */\n  duration?: number;\n\n  /**\n   * The total number of slides within your carousel so that you can safely loop\n   * through all slides.\n   */\n  totalSlides: number;\n}\n\n/**\n * @example Accessible Carousel Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { useCarousel } from \"@react-md/core/transition/useCarousel\";\n * import ChevronLeftIcon from \"@react-md/material-icons/ChevronLeftIcon\";\n * import ChevronRightIcon from \"@react-md/material-icons/ChevronRightIcon\";\n * import PauseIcon from \"@react-md/material-icons/PauseIcon\";\n * import PlayArrowIcon from \"@react-md/material-icons/PlayArrowIcon\";\n * import type { ReactElement } from \"react\";\n *\n * const slides = [\n *   { title: \"Slide 1\" },\n *   { title: \"Slide 2\" },\n *   { title: \"Slide 3\" },\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const {\n *     paused,\n *     direction,\n *     activeIndex,\n *     togglePaused,\n *     setActiveIndex,\n *     increment,\n *     decrement,\n *   } = useCarousel({\n *     duration: 5000,\n *     totalSlides: slides.length,\n *   });\n *\n *   const slideId = useId();\n *\n *   return (\n *     <div\n *       aria-roledescription=\"carousel\"\n *       aria-label=\"Carousel\"\n *       id={useId()}\n *       role=\"region\"\n *     >\n *       <SlideContainer aria-live=\"off\" direction={direction}>\n *         {slides.map(({ title }, index) => (\n *           <Slide\n *             key={title}\n *             aria-label={`Slide ${index + 1} of ${slides.length - 1}`}\n *             aria-roledescription=\"slide\"\n *             id={`${slideId}-${index}`}\n *             role=\"group\"\n *             active={activeIndex === index}\n *           >\n *             {title}\n *           </Slide>\n *         ))}\n *       </SlideContainer>\n *       <Button\n *         aria-label=\"Pause\"\n *         aria-pressed={paused}\n *         button=\"icon\"\n *         onClick={togglePaused}\n *       >\n *         {paused ? <PlayArrowIcon /> : <PauseIcon />}\n *       </Button>\n *       {slides.map(({ title }, index) => (\n *         <Button\n *           key={title}\n *           aria-label={`Slide ${index + 1}`}\n *           aria-selected={activeIndex === index}\n *           aria-controls={`${slideId}-${index}`}\n *           role=\"tab\"\n *           onClick={() => setActiveIndex(index))}\n *         />\n *       ))}\n *       <Button\n *         aria-label=\"Previous Slide\"\n *         onClick={decrement}\n *         disabled={activeIndex === 0}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronLeftIcon />\n *       </Button>\n *       <Button\n *         aria-label=\"Next Slide\"\n *         onClick={increment}\n *         disabled={activeIndex === slides.length - 1}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronRightIcon />\n *       </Button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/carousel | Carousel Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}\n * @since 6.0.0\n */\nexport function useCarousel(options: CarouselOptions): CarouselImplementation {\n  const { duration = 8000, totalSlides } = options;\n  const total = totalSlides - 1;\n\n  const [state, setCarouselSlideState] = useState<CarouselSlideState>({\n    direction: \"forward\",\n    activeIndex: 0,\n  });\n  const {\n    toggled: paused,\n    toggle: togglePaused,\n    setToggled: setPaused,\n  } = useToggle(false);\n  const setActiveIndex = useCallback<UseStateSetter<number>>(\n    (activeIndexOrGetter) => {\n      setCarouselSlideState((prevState) => {\n        const prevActiveIndex = prevState.activeIndex;\n        const nextActiveIndex =\n          typeof activeIndexOrGetter === \"function\"\n            ? activeIndexOrGetter(prevActiveIndex)\n            : activeIndexOrGetter;\n\n        return {\n          direction: prevActiveIndex < nextActiveIndex ? \"forward\" : \"backward\",\n          activeIndex: nextActiveIndex,\n        };\n      });\n    },\n    []\n  );\n  const increment = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"forward\",\n      activeIndex: Math.min(total, prevState.activeIndex + 1),\n    }));\n  }, [total]);\n  const decrement = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"backward\",\n      activeIndex: Math.max(0, prevState.activeIndex - 1),\n    }));\n  }, []);\n\n  const { activeIndex } = state;\n  useEffect(() => {\n    if (paused) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => {\n      const nextActiveIndex = loop({\n        min: 0,\n        max: total,\n        value: activeIndex,\n        increment: true,\n      });\n      setCarouselSlideState({\n        direction: activeIndex < nextActiveIndex ? \"forward\" : \"backward\",\n        activeIndex: nextActiveIndex,\n      });\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [paused, duration, activeIndex, total]);\n\n  return {\n    ...state,\n    increment,\n    decrement,\n    paused,\n    setPaused,\n    togglePaused,\n    setActiveIndex,\n    setCarouselSlideState,\n  };\n}\n"],"names":["useCallback","useEffect","useState","useToggle","loop","useCarousel","options","duration","totalSlides","total","state","setCarouselSlideState","direction","activeIndex","toggled","paused","toggle","togglePaused","setToggled","setPaused","setActiveIndex","activeIndexOrGetter","prevState","prevActiveIndex","nextActiveIndex","increment","Math","min","decrement","max","timeout","window","setTimeout","value","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAGzD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AAuExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EAAEC,WAAW,IAAI,EAAEC,WAAW,EAAE,GAAGF;IACzC,MAAMG,QAAQD,cAAc;IAE5B,MAAM,CAACE,OAAOC,sBAAsB,GAAGT,SAA6B;QAClEU,WAAW;QACXC,aAAa;IACf;IACA,MAAM,EACJC,SAASC,MAAM,EACfC,QAAQC,YAAY,EACpBC,YAAYC,SAAS,EACtB,GAAGhB,UAAU;IACd,MAAMiB,iBAAiBpB,YACrB,CAACqB;QACCV,sBAAsB,CAACW;YACrB,MAAMC,kBAAkBD,UAAUT,WAAW;YAC7C,MAAMW,kBACJ,OAAOH,wBAAwB,aAC3BA,oBAAoBE,mBACpBF;YAEN,OAAO;gBACLT,WAAWW,kBAAkBC,kBAAkB,YAAY;gBAC3DX,aAAaW;YACf;QACF;IACF,GACA,EAAE;IAEJ,MAAMC,YAAYzB,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKC,GAAG,CAAClB,OAAOa,UAAUT,WAAW,GAAG;YACvD,CAAA;IACF,GAAG;QAACJ;KAAM;IACV,MAAMmB,YAAY5B,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKG,GAAG,CAAC,GAAGP,UAAUT,WAAW,GAAG;YACnD,CAAA;IACF,GAAG,EAAE;IAEL,MAAM,EAAEA,WAAW,EAAE,GAAGH;IACxBT,UAAU;QACR,IAAIc,QAAQ;YACV;QACF;QAEA,MAAMe,UAAUC,OAAOC,UAAU,CAAC;YAChC,MAAMR,kBAAkBpB,KAAK;gBAC3BuB,KAAK;gBACLE,KAAKpB;gBACLwB,OAAOpB;gBACPY,WAAW;YACb;YACAd,sBAAsB;gBACpBC,WAAWC,cAAcW,kBAAkB,YAAY;gBACvDX,aAAaW;YACf;QACF,GAAGjB;QAEH,OAAO;YACLwB,OAAOG,YAAY,CAACJ;QACtB;IACF,GAAG;QAACf;QAAQR;QAAUM;QAAaJ;KAAM;IAEzC,OAAO;QACL,GAAGC,KAAK;QACRe;QACAG;QACAb;QACAI;QACAF;QACAG;QACAT;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCarousel.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { loop } from \"../utils/loop.js\";\nimport { type SlideDirection } from \"./SlideContainer.js\";\n\n/** @since 6.0.0 */\nexport interface CarouselSlideState {\n  direction: SlideDirection;\n  activeIndex: number;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselState extends CarouselSlideState {\n  paused: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselImplementation extends CarouselState {\n  /**\n   * Increments the carousel slide active index by 1 ensuring it does not\n   * advance past the {@link CarouselOptions.totalSlides} index.\n   */\n  increment: () => void;\n\n  /**\n   * Decrements the carousel slide active index by 1 and prevents decrementing\n   * past 0.\n   */\n  decrement: () => void;\n\n  /**\n   * This can be used to manually control the {@link paused} state.\n   */\n  setPaused: UseStateSetter<boolean>;\n\n  /**\n   * Toggles the {@link paused} state.\n   */\n  togglePaused: () => void;\n\n  /**\n   * A convenience wrapper for the {@link setCarouselSlideState} that will\n   * ensure the {@link CarouselSlideState.direction} is correct based on the\n   * current active index and next active index.\n   */\n  setActiveIndex: UseStateSetter<number>;\n\n  /**\n   * This can be used if the provided carousel actions do not solve your use\n   * case.\n   */\n  setCarouselSlideState: UseStateSetter<CarouselSlideState>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CarouselOptions {\n  /**\n   * The amount of time in milliseconds each slide should be visible before\n   * advancing to the next slide.\n   *\n   * @defaultValue `8000`\n   */\n  duration?: number;\n\n  /**\n   * The total number of slides within your carousel so that you can safely loop\n   * through all slides.\n   */\n  totalSlides: number;\n}\n\n/**\n * @example Accessible Carousel Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { useCarousel } from \"@react-md/core/transition/useCarousel\";\n * import ChevronLeftIcon from \"@react-md/material-icons/ChevronLeftIcon\";\n * import ChevronRightIcon from \"@react-md/material-icons/ChevronRightIcon\";\n * import PauseIcon from \"@react-md/material-icons/PauseIcon\";\n * import PlayArrowIcon from \"@react-md/material-icons/PlayArrowIcon\";\n * import type { ReactElement } from \"react\";\n *\n * const slides = [\n *   { title: \"Slide 1\" },\n *   { title: \"Slide 2\" },\n *   { title: \"Slide 3\" },\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const {\n *     paused,\n *     direction,\n *     activeIndex,\n *     togglePaused,\n *     setActiveIndex,\n *     increment,\n *     decrement,\n *   } = useCarousel({\n *     duration: 5000,\n *     totalSlides: slides.length,\n *   });\n *\n *   const slideId = useId();\n *\n *   return (\n *     <div\n *       aria-roledescription=\"carousel\"\n *       aria-label=\"Carousel\"\n *       id={useId()}\n *       role=\"region\"\n *     >\n *       <SlideContainer aria-live=\"off\" direction={direction}>\n *         {slides.map(({ title }, index) => (\n *           <Slide\n *             key={title}\n *             aria-label={`Slide ${index + 1} of ${slides.length - 1}`}\n *             aria-roledescription=\"slide\"\n *             id={`${slideId}-${index}`}\n *             role=\"group\"\n *             active={activeIndex === index}\n *           >\n *             {title}\n *           </Slide>\n *         ))}\n *       </SlideContainer>\n *       <Button\n *         aria-label=\"Pause\"\n *         aria-pressed={paused}\n *         button=\"icon\"\n *         onClick={togglePaused}\n *       >\n *         {paused ? <PlayArrowIcon /> : <PauseIcon />}\n *       </Button>\n *       {slides.map(({ title }, index) => (\n *         <Button\n *           key={title}\n *           aria-label={`Slide ${index + 1}`}\n *           aria-selected={activeIndex === index}\n *           aria-controls={`${slideId}-${index}`}\n *           role=\"tab\"\n *           onClick={() => setActiveIndex(index))}\n *         />\n *       ))}\n *       <Button\n *         aria-label=\"Previous Slide\"\n *         onClick={decrement}\n *         disabled={activeIndex === 0}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronLeftIcon />\n *       </Button>\n *       <Button\n *         aria-label=\"Next Slide\"\n *         onClick={increment}\n *         disabled={activeIndex === slides.length - 1}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronRightIcon />\n *       </Button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/carousel | Carousel Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}\n * @since 6.0.0\n */\nexport function useCarousel(options: CarouselOptions): CarouselImplementation {\n  const { duration = 8000, totalSlides } = options;\n  const total = totalSlides - 1;\n\n  const [state, setCarouselSlideState] = useState<CarouselSlideState>({\n    direction: \"forward\",\n    activeIndex: 0,\n  });\n  const {\n    toggled: paused,\n    toggle: togglePaused,\n    setToggled: setPaused,\n  } = useToggle(false);\n  const setActiveIndex = useCallback<UseStateSetter<number>>(\n    (activeIndexOrGetter) => {\n      setCarouselSlideState((prevState) => {\n        const prevActiveIndex = prevState.activeIndex;\n        const nextActiveIndex =\n          typeof activeIndexOrGetter === \"function\"\n            ? activeIndexOrGetter(prevActiveIndex)\n            : activeIndexOrGetter;\n\n        return {\n          direction: prevActiveIndex < nextActiveIndex ? \"forward\" : \"backward\",\n          activeIndex: nextActiveIndex,\n        };\n      });\n    },\n    []\n  );\n  const increment = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"forward\",\n      activeIndex: Math.min(total, prevState.activeIndex + 1),\n    }));\n  }, [total]);\n  const decrement = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"backward\",\n      activeIndex: Math.max(0, prevState.activeIndex - 1),\n    }));\n  }, []);\n\n  const { activeIndex } = state;\n  useEffect(() => {\n    if (paused) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => {\n      const nextActiveIndex = loop({\n        min: 0,\n        max: total,\n        value: activeIndex,\n        increment: true,\n      });\n      setCarouselSlideState({\n        direction: activeIndex < nextActiveIndex ? \"forward\" : \"backward\",\n        activeIndex: nextActiveIndex,\n      });\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [paused, duration, activeIndex, total]);\n\n  return {\n    ...state,\n    increment,\n    decrement,\n    paused,\n    setPaused,\n    togglePaused,\n    setActiveIndex,\n    setCarouselSlideState,\n  };\n}\n"],"names":["useCallback","useEffect","useState","useToggle","loop","useCarousel","options","duration","totalSlides","total","state","setCarouselSlideState","direction","activeIndex","toggled","paused","toggle","togglePaused","setToggled","setPaused","setActiveIndex","activeIndexOrGetter","prevState","prevActiveIndex","nextActiveIndex","increment","Math","min","decrement","max","timeout","window","setTimeout","value","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAGzD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AAuExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EAAEC,WAAW,IAAI,EAAEC,WAAW,EAAE,GAAGF;IACzC,MAAMG,QAAQD,cAAc;IAE5B,MAAM,CAACE,OAAOC,sBAAsB,GAAGT,SAA6B;QAClEU,WAAW;QACXC,aAAa;IACf;IACA,MAAM,EACJC,SAASC,MAAM,EACfC,QAAQC,YAAY,EACpBC,YAAYC,SAAS,EACtB,GAAGhB,UAAU;IACd,MAAMiB,iBAAiBpB,YACrB,CAACqB;QACCV,sBAAsB,CAACW;YACrB,MAAMC,kBAAkBD,UAAUT,WAAW;YAC7C,MAAMW,kBACJ,OAAOH,wBAAwB,aAC3BA,oBAAoBE,mBACpBF;YAEN,OAAO;gBACLT,WAAWW,kBAAkBC,kBAAkB,YAAY;gBAC3DX,aAAaW;YACf;QACF;IACF,GACA,EAAE;IAEJ,MAAMC,YAAYzB,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKC,GAAG,CAAClB,OAAOa,UAAUT,WAAW,GAAG;YACvD,CAAA;IACF,GAAG;QAACJ;KAAM;IACV,MAAMmB,YAAY5B,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKG,GAAG,CAAC,GAAGP,UAAUT,WAAW,GAAG;YACnD,CAAA;IACF,GAAG,EAAE;IAEL,MAAM,EAAEA,WAAW,EAAE,GAAGH;IACxBT,UAAU;QACR,IAAIc,QAAQ;YACV;QACF;QAEA,MAAMe,UAAUC,OAAOC,UAAU,CAAC;YAChC,MAAMR,kBAAkBpB,KAAK;gBAC3BuB,KAAK;gBACLE,KAAKpB;gBACLwB,OAAOpB;gBACPY,WAAW;YACb;YACAd,sBAAsB;gBACpBC,WAAWC,cAAcW,kBAAkB,YAAY;gBACvDX,aAAaW;YACf;QACF,GAAGjB;QAEH,OAAO;YACLwB,OAAOG,YAAY,CAACJ;QACtB;IACF,GAAG;QAACf;QAAQR;QAAUM;QAAaJ;KAAM;IAEzC,OAAO;QACL,GAAGC,KAAK;QACRe;QACAG;QACAb;QACAI;QACAF;QACAG;QACAT;IACF;AACF"}

package/dist/transition/useMaxWidthTransition.d.ts

@@ -1,11 +1,23 @@
 import type { ReactNode } from "react";
+declare module "react" {
+    interface CSSProperites {
+        "--rmd-max-width"?: string | number;
+        "--rmd-max-width-gap"?: string | number;
+    }
+}
+/**
+ * @since 6.3.1
+ */
+export interface BaseMaxWidthTransitionOptions {
+    className?: string;
+}
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions
  */
-export interface MaxWidthTransitionOptions {
+export interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {
     element: ReactNode;
     transitionIn: boolean;
-    className?: string;
     disabled?: boolean;
     disableTransition?: boolean;
 }

package/dist/transition/useMaxWidthTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  className?: string;\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AAc7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperites {\n    \"--rmd-max-width\"?: string | number;\n    \"--rmd-max-width-gap\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions\n  extends BaseMaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA6B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}

package/dist/transition/useSlideTransition.d.ts

@@ -1,4 +1,9 @@
 import { type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions } from "./types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-slide-duration"?: string | number;
+    }
+}
 /** @since 6.0.0 */
 export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: 150;
 /** @since 6.0.0 */

package/dist/transition/useSlideTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSlideTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT =\n  150 as const satisfies TransitionTimeout;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {\n  enter: \"rmd-slide--enter\",\n  enterActive: \"rmd-slide--enter-active rmd-slide--animate\",\n  exit: \"rmd-slide--exit\",\n  exitActive: \"rmd-slide--exit-active rmd-slide--animate\",\n} as const satisfies CSSTransitionClassNames;\n\n/** @since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import {\n *   type SlideDirection,\n *   slideContainer,\n * } from \"@react-md/core/transition/SlideContainer\";\n * import { useSlideTransition } from \"@react-md/core/transition/useSlideTransition\";\n * import { type ReactElement, type ReactNode, useState } from \"react\";\n *\n * interface SlideProps {\n *   active: boolean;\n *   children: ReactNode;\n * }\n *\n * function Slide({ active, children }: SlideProps): ReactElement | null {\n *   const { rendered, elementProps } = useSlideTransition({\n *     transitionIn: active,\n *   });\n *\n *   if (!rendered) {\n *     return null;\n *   }\n *\n *   return <div {...elementProps}>{children}</div>;\n * }\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <div className={slideContainer({ direction })}>\n *       <Slide active={activeIndex === 0}>Slide 1</Slide>\n *       <Slide active={activeIndex === 1}>Slide 2</Slide>\n *       <Slide active={activeIndex === 2}>Slide 3</Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} and {@link Slide} for convenient default\n * implementations.\n * @since 6.0.0\n */\nexport function useSlideTransition<E extends HTMLElement>(\n  options: SlideTransitionOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n    className,\n    temporary = false,\n    exitedHidden = true,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    className: cnb(\"rmd-slide\", className),\n    classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,\n    temporary,\n    exitedHidden,\n  });\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_SLIDE_TRANSITION_TIMEOUT","DEFAULT_SLIDE_TRANSITION_CLASSNAMES","enter","enterActive","exit","exitActive","useSlideTransition","options","timeout","className","temporary","exitedHidden","transitionOptions","classNames"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,iBAAiB,GACjB,OAAO,MAAMC,mCACX,IAAyC;AAE3C,iBAAiB,GACjB,OAAO,MAAMC,sCAAsC;IACjDC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAA6C;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DC,GACD,OAAO,SAASC,mBACdC,OAAkC;IAElC,MAAM,EACJC,UAAUR,gCAAgC,EAC1CS,SAAS,EACTC,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,mBACJ,GAAGL;IAEJ,OAAOR,iBAAiB;QACtB,GAAGa,iBAAiB;QACpBJ;QACAC,WAAWX,IAAI,aAAaW;QAC5BI,YAAYZ;QACZS;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useSlideTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.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 const DEFAULT_SLIDE_TRANSITION_TIMEOUT =\n  150 as const satisfies TransitionTimeout;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {\n  enter: \"rmd-slide--enter\",\n  enterActive: \"rmd-slide--enter-active rmd-slide--animate\",\n  exit: \"rmd-slide--exit\",\n  exitActive: \"rmd-slide--exit-active rmd-slide--animate\",\n} as const satisfies CSSTransitionClassNames;\n\n/** @since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import {\n *   type SlideDirection,\n *   slideContainer,\n * } from \"@react-md/core/transition/SlideContainer\";\n * import { useSlideTransition } from \"@react-md/core/transition/useSlideTransition\";\n * import { type ReactElement, type ReactNode, useState } from \"react\";\n *\n * interface SlideProps {\n *   active: boolean;\n *   children: ReactNode;\n * }\n *\n * function Slide({ active, children }: SlideProps): ReactElement | null {\n *   const { rendered, elementProps } = useSlideTransition({\n *     transitionIn: active,\n *   });\n *\n *   if (!rendered) {\n *     return null;\n *   }\n *\n *   return <div {...elementProps}>{children}</div>;\n * }\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <div className={slideContainer({ direction })}>\n *       <Slide active={activeIndex === 0}>Slide 1</Slide>\n *       <Slide active={activeIndex === 1}>Slide 2</Slide>\n *       <Slide active={activeIndex === 2}>Slide 3</Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} and {@link Slide} for convenient default\n * implementations.\n * @since 6.0.0\n */\nexport function useSlideTransition<E extends HTMLElement>(\n  options: SlideTransitionOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n    className,\n    temporary = false,\n    exitedHidden = true,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    className: cnb(\"rmd-slide\", className),\n    classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,\n    temporary,\n    exitedHidden,\n  });\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_SLIDE_TRANSITION_TIMEOUT","DEFAULT_SLIDE_TRANSITION_CLASSNAMES","enter","enterActive","exit","exitActive","useSlideTransition","options","timeout","className","temporary","exitedHidden","transitionOptions","classNames"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAUzD,iBAAiB,GACjB,OAAO,MAAMC,mCACX,IAAyC;AAE3C,iBAAiB,GACjB,OAAO,MAAMC,sCAAsC;IACjDC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAA6C;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DC,GACD,OAAO,SAASC,mBACdC,OAAkC;IAElC,MAAM,EACJC,UAAUR,gCAAgC,EAC1CS,SAAS,EACTC,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,mBACJ,GAAGL;IAEJ,OAAOR,iBAAiB;QACtB,GAAGa,iBAAiB;QACpBJ;QACAC,WAAWX,IAAI,aAAaW;QAC5BI,YAAYZ;QACZS;QACAC;IACF;AACF"}

package/dist/tree/Tree.d.ts

@@ -2,17 +2,10 @@ import { type ComponentType, type HTMLAttributes, type ReactElement, type ReactN
 import { type CustomLinkComponent } from "../link/Link.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type TreeExpansionMode } from "./TreeProvider.js";
+import { type TreeClassNameOptions } from "./styles.js";
 import { type TreeData, type TreeItemNode, type TreeItemRendererProps, type TreeItemSorter } from "./types.js";
 import { type TreeExpansion } from "./useTreeExpansion.js";
 import { type TreeSelection } from "./useTreeSelection.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-tree-depth"?: number;
-        "--rmd-tree-item-padding"?: string | number;
-        "--rmd-tree-item-padding-base"?: string | number;
-        "--rmd-tree-item-padding-incrementor"?: string | number;
-    }
-}
 /**
  * @since 6.0.0
  */
@@ -26,8 +19,11 @@ export type TreeHTMLAttributes = Omit<HTMLAttributes<HTMLUListElement>, "role" |
  * - `getItemLabel`
  * - `getItemValue`
  * - `getItemProps`
+ *
+ * @since 6.3.1 Extends TreeClassNameOptions for CSSProperties module
+ * augmentation.
  */
-export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, TreeExpansion, TreeSelection {
+export interface TreeProps<T extends TreeItemNode> extends TreeHTMLAttributes, TreeClassNameOptions, TreeExpansion, TreeSelection {
     /** @see {@link TreeData} */
     data: TreeData<T>;
     /**

package/dist/tree/Tree.js

@@ -77,6 +77,7 @@ import { useTreeMovement } from "./useTreeMovement.js";
         rootId
     });
     const { metadataLookup, movementContext, movementProps } = useTreeMovement({
+        ref: treeRef,
         onClick,
         onFocus,
         onKeyDown,
@@ -110,7 +111,6 @@ import { useTreeMovement } from "./useTreeMovement.js";
                 ...remaining,
                 ...movementProps,
                 id: treeId,
-                ref: treeRef,
                 role: "tree",
                 tabIndex: 0,
                 className: tree({

package/dist/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { type TreeExpansionMode, TreeProvider } from \"./TreeProvider.js\";\nimport { tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example Custom Tree Item Renderer\n   * ```tsx\n   * import { useTreeContext } from \"@react-md/core/movement/TreeProvider\"\n   * import { useKeyboardMovementContext } from \"@react-md/core/movement/useKeyboardMovementProvider\"\n   * import { TreeItem } from \"@react-md/core/tree/TreeItem\";\n   * import { type TreeItemRendererProps } from \"@react-md/core/tree/types\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import { type ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { useTree } from \"@react-md/core/tree/useTree\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link TreeProps.renderer} for a custom tree item example.\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent = \"a\",\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      linkComponent={linkComponent}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <KeyboardMovementProvider value={movementContext}>\n        <List\n          {...remaining}\n          {...movementProps}\n          id={treeId}\n          ref={treeRef}\n          role=\"tree\"\n          tabIndex={0}\n          className={tree({ className })}\n        >\n          <RenderRecursively\n            items={items}\n            render={TreeItemRenderer}\n            getItemKey={(options) => options.item.itemId}\n          />\n        </List>\n      </KeyboardMovementProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","value","ref","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AAWA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAAiCC,YAAY,QAAQ,oBAAoB;AACzE,SAASC,IAAI,QAAQ,cAAc;AAQnC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AAoJvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEe;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB0C,OAAOF;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJO,KAAK5B;gBACL6B,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}
+{"version":3,"sources":["../../src/tree/Tree.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { List } from \"../list/List.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { RenderRecursively } from \"../utils/RenderRecursively.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { DefaultTreeItemRenderer } from \"./DefaultTreeItemRenderer.js\";\nimport { type TreeExpansionMode, TreeProvider } from \"./TreeProvider.js\";\nimport { type TreeClassNameOptions, tree } from \"./styles.js\";\nimport {\n  type TreeData,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n  type TreeItemSorter,\n} from \"./types.js\";\nimport { type TreeExpansion } from \"./useTreeExpansion.js\";\nimport { useTreeItems } from \"./useTreeItems.js\";\nimport { useTreeMovement } from \"./useTreeMovement.js\";\nimport { type TreeSelection } from \"./useTreeSelection.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TreeHTMLAttributes = Omit<\n  HTMLAttributes<HTMLUListElement>,\n  \"role\" | \"tabIndex\" | \"children\"\n>;\n\n/**\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n *\n * @since 6.3.1 Extends TreeClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface TreeProps<T extends TreeItemNode>\n  extends TreeHTMLAttributes,\n    TreeClassNameOptions,\n    TreeExpansion,\n    TreeSelection {\n  /** @see {@link TreeData} */\n  data: TreeData<T>;\n\n  /**\n   * An optional ref to pass to the tree element.\n   *\n   * @since 6.0.0\n   */\n  treeRef?: Ref<HTMLUListElement>;\n\n  /** @defaultValue `identity` */\n  sort?: TreeItemSorter<T>;\n\n  /**\n   * Any nodes in the {@link data} that have a `parentId` set to this value will\n   * appear at the root of the tree.\n   *\n   * @defaultValue `null`\n   */\n  rootId?: string | null;\n\n  /**\n   * @defaultValue `\"auto\"`\n   * @see {@link TreeExpansionMode}\n   */\n  expansionMode?: TreeExpansionMode;\n\n  /**\n   * Set this to `true` to display the expander icon to the left instead of the\n   * right. This will also update the styles slightly so you can still provide a\n   * `leftAddon`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  expanderIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to disable the collapse transition for all tree items.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * Set this to `true` if the collapsed tree items should be removed from the\n   * DOM instead of hidden using `display: none`. This _might_ improve\n   * performance for large trees.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n\n  /**\n   * @example Custom Tree Item Renderer\n   * ```tsx\n   * import { useTreeContext } from \"@react-md/core/movement/TreeProvider\"\n   * import { useKeyboardMovementContext } from \"@react-md/core/movement/useKeyboardMovementProvider\"\n   * import { TreeItem } from \"@react-md/core/tree/TreeItem\";\n   * import { type TreeItemRendererProps } from \"@react-md/core/tree/types\";\n   * import FolderIcon from \"@react-md/material-icons/FolderIcon\";\n   * import FolderOpenIcon from \"@react-md/material-icons/FolderOpenIcon\";\n   * import { type ReactElement } from \"react\";\n   *\n   * export function CustomTreeItem(props: TreeItemRendererProps): ReactElement {\n   *   const { item, ...remaining  } = props;\n   *   const id = useId();\n   *   const { itemId } = item;\n   *   const {\n   *     data,\n   *     expandedIds,\n   *     selectedIds,\n   *     toggleTreeItemExpansion,\n   *     toggleTreeItemSelection,\n   *   } = useTreeContext()\n   *   const { activeDescendantId } = useKeyboardMovementContext();\n   *\n   *   const focused = id === activeDescendantId;\n   *   const expanded = expandedIds.has(itemId);\n   *   const selected = selectedIds.has(itemId);\n   *   const children = ...; // do whatever\n   *\n   *   return (\n   *     <TreeItem\n   *       {...remaining}\n   *       id={id}\n   *       itemId={itemId}\n   *       leftAddon={expanded ? <FolderOpenIcon /> : <FolderIcon />}\n   *     >\n   *       {children}\n   *     </TreeItem>\n   *   );\n   * }\n   * ```\n   *\n   * @see {@link DefaultTreeItemRenderer}\n   * @defaultValue `DefaultTreeItemRenderer`\n   */\n  renderer?: ComponentType<TreeItemRendererProps<T>>;\n\n  /**\n   * The link component to use for any tree item nodes that have a `to` or\n   * `href`.\n   *\n   * @see {@link CustomLinkComponent}\n   * @defaultValue `Link`\n   */\n  linkComponent?: CustomLinkComponent;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Tree\n * ```tsx\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { useTree } from \"@react-md/core/tree/useTree\";\n * import type { ReactElement } from \"react\";\n *\n * const data: TreeData = {\n *   \"item-1\": {\n *     itemId: \"item-1\",\n *     parentId: null,\n *     name: \"Root Level Item 1\",\n *   },\n *   \"item-2\": {\n *     itemId: \"item-2\",\n *     parentId: \"item-1\",\n *     name: \"A child for the first item\",\n *   },\n *   \"item-3\": {\n *     itemId: \"item-3\",\n *     parentId: \"item-1\",\n *     children: \"Another child for the first item\",\n *   },\n * };\n *\n * function Example(): ReactElement {\n *   const tree = useTree({\n *     // can enable multiple selected items\n *     // multiSelect: true,\n *\n *     // can set default expanded and selected items\n *     // defaultSelectedIds: [\"item-1\"],\n *     // defaultExpandedIds: [\"item-1\"],\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Tree\"\n *       data={data}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link TreeProps.renderer} for a custom tree item example.\n * @since 6.0.0 There was a major API change and the `id` is now `optional`.\n * In addition, the following props were removed:\n * - `itemRenderer`\n * - `labelKey`\n * - `valueKey`\n * - `getItemLabel`\n * - `getItemValue`\n * - `getItemProps`\n */\nexport function Tree<T extends TreeItemNode>(\n  props: LabelRequiredForA11y<TreeProps<T>>\n): ReactElement {\n  const {\n    id,\n    data,\n    sort = identity,\n    rootId = null,\n    treeRef,\n    className,\n    expandedIds,\n    selectedIds,\n    toggleTreeItemSelection,\n    selectMultipleTreeItems,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n    onClick,\n    onFocus,\n    onKeyDown,\n    renderer: TreeItemRenderer = DefaultTreeItemRenderer,\n    multiSelect = false,\n    expansionMode = \"auto\",\n    expanderIcon,\n    expanderLeft = false,\n    linkComponent = \"a\",\n    disableTransition = false,\n    temporaryChildItems = false,\n    ...remaining\n  } = props;\n  const treeId = useEnsuredId(id, \"tree\");\n  const { items, treeItemChildIds } = useTreeItems({\n    data,\n    sort,\n    rootId,\n  });\n\n  const { metadataLookup, movementContext, movementProps } = useTreeMovement({\n    ref: treeRef,\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  });\n\n  return (\n    <TreeProvider\n      data={data}\n      rootId={rootId}\n      multiSelect={multiSelect}\n      linkComponent={linkComponent}\n      selectedIds={selectedIds}\n      expandedIds={expandedIds}\n      expanderIcon={expanderIcon}\n      expanderLeft={expanderLeft}\n      expansionMode={expansionMode}\n      metadataLookup={metadataLookup}\n      disableTransition={disableTransition}\n      temporaryChildItems={temporaryChildItems}\n      toggleTreeItemSelection={toggleTreeItemSelection}\n      toggleTreeItemExpansion={toggleTreeItemExpansion}\n      selectMultipleTreeItems={selectMultipleTreeItems}\n      expandMultipleTreeItems={expandMultipleTreeItems}\n    >\n      <KeyboardMovementProvider value={movementContext}>\n        <List\n          {...remaining}\n          {...movementProps}\n          id={treeId}\n          role=\"tree\"\n          tabIndex={0}\n          className={tree({ className })}\n        >\n          <RenderRecursively\n            items={items}\n            render={TreeItemRenderer}\n            getItemKey={(options) => options.item.itemId}\n          />\n        </List>\n      </KeyboardMovementProvider>\n    </TreeProvider>\n  );\n}\n"],"names":["List","KeyboardMovementProvider","useEnsuredId","RenderRecursively","identity","DefaultTreeItemRenderer","TreeProvider","tree","useTreeItems","useTreeMovement","Tree","props","id","data","sort","rootId","treeRef","className","expandedIds","selectedIds","toggleTreeItemSelection","selectMultipleTreeItems","toggleTreeItemExpansion","expandMultipleTreeItems","onClick","onFocus","onKeyDown","renderer","TreeItemRenderer","multiSelect","expansionMode","expanderIcon","expanderLeft","linkComponent","disableTransition","temporaryChildItems","remaining","treeId","items","treeItemChildIds","metadataLookup","movementContext","movementProps","ref","value","role","tabIndex","render","getItemKey","options","item","itemId"],"mappings":"AAAA;;AAWA,SAASA,IAAI,QAAQ,kBAAkB;AACvC,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAAiCC,YAAY,QAAQ,oBAAoB;AACzE,SAAoCC,IAAI,QAAQ,cAAc;AAQ9D,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,eAAe,QAAQ,uBAAuB;AA+IvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,SAASC,KACdC,KAAyC;IAEzC,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,OAAOV,QAAQ,EACfW,SAAS,IAAI,EACbC,OAAO,EACPC,SAAS,EACTC,WAAW,EACXC,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,uBAAuB,EACvBC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,mBAAmBvB,uBAAuB,EACpDwB,cAAc,KAAK,EACnBC,gBAAgB,MAAM,EACtBC,YAAY,EACZC,eAAe,KAAK,EACpBC,gBAAgB,GAAG,EACnBC,oBAAoB,KAAK,EACzBC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,SAASnC,aAAaU,IAAI;IAChC,MAAM,EAAE0B,KAAK,EAAEC,gBAAgB,EAAE,GAAG/B,aAAa;QAC/CK;QACAC;QACAC;IACF;IAEA,MAAM,EAAEyB,cAAc,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGjC,gBAAgB;QACzEkC,KAAK3B;QACLQ;QACAC;QACAC;QACAb;QACAK;QACAC;QACAoB;QACAjB;QACAC;IACF;IAEA,qBACE,KAACjB;QACCO,MAAMA;QACNE,QAAQA;QACRc,aAAaA;QACbI,eAAeA;QACfd,aAAaA;QACbD,aAAaA;QACba,cAAcA;QACdC,cAAcA;QACdF,eAAeA;QACfU,gBAAgBA;QAChBN,mBAAmBA;QACnBC,qBAAqBA;QACrBf,yBAAyBA;QACzBE,yBAAyBA;QACzBD,yBAAyBA;QACzBE,yBAAyBA;kBAEzB,cAAA,KAACtB;YAAyB2C,OAAOH;sBAC/B,cAAA,KAACzC;gBACE,GAAGoC,SAAS;gBACZ,GAAGM,aAAa;gBACjB9B,IAAIyB;gBACJQ,MAAK;gBACLC,UAAU;gBACV7B,WAAWV,KAAK;oBAAEU;gBAAU;0BAE5B,cAAA,KAACd;oBACCmC,OAAOA;oBACPS,QAAQnB;oBACRoB,YAAY,CAACC,UAAYA,QAAQC,IAAI,CAACC,MAAM;;;;;AAMxD"}

package/dist/tree/styles.d.ts

@@ -1,4 +1,12 @@
-import type { InternalListItemClassNameOptions } from "../list/listItemStyles.js";
+import { type InternalListItemClassNameOptions } from "../list/listItemStyles.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-tree-depth"?: number;
+        "--rmd-tree-item-padding"?: string | number;
+        "--rmd-tree-item-padding-base"?: string | number;
+        "--rmd-tree-item-padding-incrementor"?: string | number;
+    }
+}
 /** @since 6.0.0 */
 export interface TreeClassNameOptions {
     className?: string;

package/dist/tree/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport type { InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\n/** @since 6.0.0 */\nexport interface TreeClassNameOptions {\n  className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeStyles(), className);\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n  className?: string;\n  expander?: boolean;\n\n  /**\n   * Settings this to `true` will update the styles for the expander icon within\n   * the tree item to rotate `down -> right` instead of `down -> left`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n  const { className, expander = false, expanderLeft = false } = options;\n\n  return cnb(\n    treeItemStyles({\n      \"expander-left\": expander && expanderLeft,\n      \"expander-right\": expander && !expanderLeft,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n  extends InternalListItemClassNameOptions {\n  /**\n   * Set this\n   *\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * Set this to `true` when the tree item is the current keyboard focus with\n   * `aria-activedescendant`. This will apply the focus styles only while the\n   * parent tree component is focused and the user is in keyboard mode.\n   *\n   *\n   * @defaultValue `false`\n   */\n  focused?: boolean;\n\n  /**\n   * Set this to `true` hen the tree item has been selected by the user. The\n   * default styles just\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemContent(\n  options: TreeItemContentClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    focused,\n    selected,\n    disabled = false,\n    ...remaining\n  } = options;\n\n  return cnb(\n    treeItemStyles(\"content\", {\n      link,\n      focused,\n      selected,\n      disabled,\n    }),\n    listItem({\n      className,\n      disabled,\n      ...remaining,\n    })\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n  className?: string;\n  isLeafNode: boolean;\n  isMediaLeftAddon: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n  const { isLeafNode, isMediaLeftAddon, className } = options;\n\n  return cnb(\n    isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AACvB,MAAME,iBAAiBF,IAAI;AAC3B,MAAMG,kBAAkBH,IAAI;AAO5B;;;;;CAKC,GACD,OAAO,SAASI,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIG,cAAcK;AAC3B;AAgBA;;;;;CAKC,GACD,OAAO,SAASC,SAASF,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEE,WAAW,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGJ;IAE9D,OAAOP,IACLI,eAAe;QACb,iBAAiBM,YAAYC;QAC7B,kBAAkBD,YAAY,CAACC;IACjC,IACAH;AAEJ;AA+BA;;CAEC,GACD,OAAO,SAASI,gBACdL,UAA2C,CAAC,CAAC;IAE7C,MAAM,EACJC,SAAS,EACTK,OAAO,KAAK,EACZC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,OAAOP,IACLI,eAAe,WAAW;QACxBS;QACAC;QACAC;QACAC;IACF,IACAf,SAAS;QACPO;QACAQ;QACA,GAAGC,SAAS;IACd;AAEJ;AAWA;;CAEC,GACD,OAAO,SAASC,cAAcX,OAAsC;IAClE,MAAM,EAAEY,UAAU,EAAEC,gBAAgB,EAAEZ,SAAS,EAAE,GAAGD;IAEpD,OAAOP,IACLoB,oBAAoBhB,eAAe,SAAS;QAAEiB,QAAQF;IAAW,IACjEX;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASc,UAAUf,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIK,mBAAmBG;AAChC"}
+{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tree-depth\"?: number;\n    \"--rmd-tree-item-padding\"?: string | number;\n    \"--rmd-tree-item-padding-base\"?: string | number;\n    \"--rmd-tree-item-padding-incrementor\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface TreeClassNameOptions {\n  className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeStyles(), className);\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n  className?: string;\n  expander?: boolean;\n\n  /**\n   * Settings this to `true` will update the styles for the expander icon within\n   * the tree item to rotate `down -> right` instead of `down -> left`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n  const { className, expander = false, expanderLeft = false } = options;\n\n  return cnb(\n    treeItemStyles({\n      \"expander-left\": expander && expanderLeft,\n      \"expander-right\": expander && !expanderLeft,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n  extends InternalListItemClassNameOptions {\n  /**\n   * Set this\n   *\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * Set this to `true` when the tree item is the current keyboard focus with\n   * `aria-activedescendant`. This will apply the focus styles only while the\n   * parent tree component is focused and the user is in keyboard mode.\n   *\n   *\n   * @defaultValue `false`\n   */\n  focused?: boolean;\n\n  /**\n   * Set this to `true` hen the tree item has been selected by the user. The\n   * default styles just\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemContent(\n  options: TreeItemContentClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    focused,\n    selected,\n    disabled = false,\n    ...remaining\n  } = options;\n\n  return cnb(\n    treeItemStyles(\"content\", {\n      link,\n      focused,\n      selected,\n      disabled,\n    }),\n    listItem({\n      className,\n      disabled,\n      ...remaining,\n    })\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n  className?: string;\n  isLeafNode: boolean;\n  isMediaLeftAddon: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n  const { isLeafNode, isMediaLeftAddon, className } = options;\n\n  return cnb(\n    isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AACvB,MAAME,iBAAiBF,IAAI;AAC3B,MAAMG,kBAAkBH,IAAI;AAgB5B;;;;;CAKC,GACD,OAAO,SAASI,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIG,cAAcK;AAC3B;AAgBA;;;;;CAKC,GACD,OAAO,SAASC,SAASF,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEE,WAAW,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGJ;IAE9D,OAAOP,IACLI,eAAe;QACb,iBAAiBM,YAAYC;QAC7B,kBAAkBD,YAAY,CAACC;IACjC,IACAH;AAEJ;AA+BA;;CAEC,GACD,OAAO,SAASI,gBACdL,UAA2C,CAAC,CAAC;IAE7C,MAAM,EACJC,SAAS,EACTK,OAAO,KAAK,EACZC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,OAAOP,IACLI,eAAe,WAAW;QACxBS;QACAC;QACAC;QACAC;IACF,IACAf,SAAS;QACPO;QACAQ;QACA,GAAGC,SAAS;IACd;AAEJ;AAWA;;CAEC,GACD,OAAO,SAASC,cAAcX,OAAsC;IAClE,MAAM,EAAEY,UAAU,EAAEC,gBAAgB,EAAEZ,SAAS,EAAE,GAAGD;IAEpD,OAAOP,IACLoB,oBAAoBhB,eAAe,SAAS;QAAEiB,QAAQF;IAAW,IACjEX;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASc,UAAUf,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIK,mBAAmBG;AAChC"}

package/dist/tree/useTreeMovement.d.ts

@@ -1,4 +1,4 @@
-import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
 import type { NonNullMutableRef } from "../types.js";
 import type { TreeItemMetadataLookup } from "./TreeProvider.js";
@@ -10,6 +10,7 @@ import type { TreeItemChildIds } from "./useTreeItems.js";
  * @internal
  */
 interface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {
+    ref?: Ref<HTMLUListElement>;
     data: TreeData<T>;
     onClick: MouseEventHandler<HTMLUListElement> | undefined;
     onFocus: FocusEventHandler<HTMLUListElement> | undefined;

package/dist/tree/useTreeMovement.js

@@ -30,7 +30,7 @@ import { getNextFocusableIndex } from "../movement/utils.js";
  * @since 6.0.0
  * @internal
  */ export function useTreeMovement(options) {
-    const { onClick, onFocus, onKeyDown, data, expandedIds, selectedIds, treeItemChildIds, toggleTreeItemExpansion, expandMultipleTreeItems } = options;
+    const { ref, onClick, onFocus, onKeyDown, data, expandedIds, selectedIds, treeItemChildIds, toggleTreeItemExpansion, expandMultipleTreeItems } = options;
     const metadataLookup = useRef({
         expandable: {},
         disabledItems: {},
@@ -38,6 +38,7 @@ import { getNextFocusableIndex } from "../movement/utils.js";
         itemToElement: {}
     });
     const movement = useKeyboardMovementProvider({
+        ref,
         onClick,
         onFocus,
         onKeyDown,

package/dist/tree/useTreeMovement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useRef } from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement\n  extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore stop */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"AAAA;AAOA,SAASA,MAAM,QAAQ,QAAQ;AAG/B,SAASC,2BAA2B,QAAQ,6CAA6C;AACzF,SAASC,qBAAqB,QAAQ,uBAAuB;AAO7D;;;;;;;;;;;;CAYC,GACD,MAAMC,yBAAyB,CAACC,OAC9BA,KACGC,OAAO,CAAC,mBACPC,wBAAwBC,aAAa,qBAAqB;AAEhE;;;CAGC,GACD,MAAMC,sBAAsB,CAC1BC;IAEA,MAAMC,QAAQ;WACTD,UAAUE,gBAAgB,CAAc;KAC5C;IAED,OAAOD,MAAME,MAAM,CACjB,CAACR,OACC,yDAAyD;QACzDA,KAAKS,YAAY,IACjB,uDAAuD;QACvD,CAACV,uBAAuBC;AAE9B;AA4BA;;;CAGC,GACD,OAAO,SAASU,gBACdC,OAA+B;IAE/B,MAAM,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGT;IAEJ,MAAMU,iBAAiBzB,OAA+B;QACpD0B,YAAY,CAAC;QACbC,eAAe,CAAC;QAChBC,eAAe,CAAC;QAChBC,eAAe,CAAC;IAClB;IACA,MAAMC,WAAW7B,4BAA4B;QAC3Ce;QACAC;QACAC;QACAa,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,aAAa,EAAE,GACnEJ;YACF,MAAM,EAAEN,UAAU,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAC/DJ,eAAeY,OAAO;YACxB,MAAMC,SAASV,aAAa,CAACM,mBAAmB;YAChD,MAAM9B,OAAOe,IAAI,CAACmB,OAAO;YAEzB,mBAAmB,GACnB,IAAI,CAAClC,MAAM;gBACT;YACF;YACA,kBAAkB,GAElB,MAAMmC,WAAWZ,aAAa,CAACW,OAAO;YACtC,MAAME,WAAWpB,YAAYqB,GAAG,CAACH;YAEjC,IAAII,UAAU;YACd,OAAQT,MAAMU,GAAG;gBACf,KAAK;oBACH,IAAIH,YAAY,CAACD,UAAU;wBACzBG,UAAU;wBACVnB,wBAAwBe;oBAC1B,OAAO,IAAIlC,KAAKwC,QAAQ,EAAE;wBACxB,kEAAkE;wBAClE,MAAMA,WAAWf,aAAa,CAACzB,KAAKwC,QAAQ,CAAC;wBAC7C,MAAMC,aAAarC,oBAAoByB,MAAMa,aAAa;wBAC1D,MAAMC,QAAQF,WAAWG,SAAS,CAChC,CAACC,UAAYA,QAAQC,EAAE,KAAKN;wBAE9BR,cAAcW,OAAOF;oBACvB;oBAEA;gBACF,KAAK;oBACH,IAAInB,UAAU,CAACY,OAAO,IAAI,CAACC,UAAU;wBACnC,IAAI,CAACC,UAAU;4BACbE,UAAU;4BACVnB,wBAAwBe;wBAC1B,OAAO;4BACL,kEAAkE;4BAClE,MAAMO,aAAarC,oBAAoByB,MAAMa,aAAa;4BAC1D,MAAMC,QAAQ7C,sBAAsB;gCAClCiD,UAAU;gCACVC,WAAW;gCACXP;gCACAQ,iBAAiB;gCACjBlB,mBAAmBA,kBAAkBE,OAAO;4BAC9C;4BAEAD,cAAcW,OAAOF;wBACvB;oBACF;oBAEA;gBACF,KAAK;oBAAK;wBACRH,UAAU;wBACV,MAAMY,UAAUhC,iBAAiBiC,GAAG,CAACnD,KAAKwC,QAAQ;wBAClD,IAAIU,SAAS;4BACX,MAAME,gBAAgB;mCAAIF;6BAAQ,CAAC1C,MAAM,CACvC,CAAC0B,SAAWZ,UAAU,CAACY,OAAO;4BAEhC,IAAIkB,cAAcC,MAAM,EAAE;gCACxBjC,wBACE,CAACkC,OAAS,IAAIC,IAAI;2CAAID;2CAASF;qCAAc;gCAE/CrB,kBAAkBE,OAAO,GAAG,CAAC;4BAC/B;wBACF;wBACA;oBACF;YACF;YAEA,IAAIK,SAAS;gBACXT,MAAM2B,eAAe;gBACrB3B,MAAM4B,cAAc;YACtB;QACF;QACAC,YAAY;QACZC,kBAAkB;QAClBC,sBAAsBxD;QACtByD,wBAAuBlD,OAAO;YAC5B,MAAM,EAAE8B,UAAU,EAAE,GAAG9B;YACvB,MAAM,EAAEa,aAAa,EAAE,GAAGH,eAAeY,OAAO;YAEhD,OAAOQ,WAAWG,SAAS,CAAC,CAACC,UAC3B5B,YAAYoB,GAAG,CAACb,aAAa,CAACqB,QAAQC,EAAE,CAAC;QAE7C;IACF;IAEA,OAAO;QACLzB;QACA,GAAGK,QAAQ;IACb;AACF"}
+{"version":3,"sources":["../../src/tree/useTreeMovement.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n} from \"react\";\nimport { useRef } from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { getNextFocusableIndex } from \"../movement/utils.js\";\nimport type { NonNullMutableRef } from \"../types.js\";\nimport type { TreeItemMetadataLookup } from \"./TreeProvider.js\";\nimport type { TreeData, TreeItemNode } from \"./types.js\";\nimport type { TreeExpansion } from \"./useTreeExpansion.js\";\nimport type { TreeItemChildIds } from \"./useTreeItems.js\";\n\n/**\n * This helps catch the edge case where the collapse transition has occurred for\n * a tree item group, but the user uses the `ArrowDown` key before it has\n * finished. So to do this:\n *\n * - find the parent group of the tree item\n * - find the tree item that controls the group (the element before the group)\n * - check if the `aria-expanded` state is `\"false\"` meaning it is considered\n *   closed\n *\n * @internal\n * @since 6.0.0\n */\nconst isParentItemCollapsing = (item: HTMLElement): boolean =>\n  item\n    .closest(\"[role='group']\")\n    ?.previousElementSibling?.getAttribute(\"aria-expanded\") === \"false\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst getVisibleTreeItems = (\n  container: HTMLElement\n): readonly HTMLElement[] => {\n  const items = [\n    ...container.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'),\n  ];\n\n  return items.filter(\n    (item) =>\n      // do not include items that have a `hidden` parent group\n      item.offsetParent &&\n      // do not include items that are about to become hidden\n      !isParentItemCollapsing(item)\n  );\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {\n  ref?: Ref<HTMLUListElement>;\n  data: TreeData<T>;\n  onClick: MouseEventHandler<HTMLUListElement> | undefined;\n  onFocus: FocusEventHandler<HTMLUListElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLUListElement> | undefined;\n  selectedIds: ReadonlySet<string>;\n  treeItemChildIds: TreeItemChildIds;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface TreeMovement\n  extends KeyboardMovementProviderImplementation<HTMLUListElement> {\n  /**\n   * This will be mutated by the `TreeItem` component and used to handle\n   * keyboard movement.\n   */\n  metadataLookup: NonNullMutableRef<TreeItemMetadataLookup>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTreeMovement<T extends TreeItemNode>(\n  options: TreeMovementOptions<T>\n): TreeMovement {\n  const {\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    data,\n    expandedIds,\n    selectedIds,\n    treeItemChildIds,\n    toggleTreeItemExpansion,\n    expandMultipleTreeItems,\n  } = options;\n\n  const metadataLookup = useRef<TreeItemMetadataLookup>({\n    expandable: {},\n    disabledItems: {},\n    elementToItem: {},\n    itemToElement: {},\n  });\n  const movement = useKeyboardMovementProvider({\n    ref,\n    onClick,\n    onFocus,\n    onKeyDown,\n    extendKeyDown(movementData) {\n      const { event, activeDescendantId, currentFocusIndex, setFocusIndex } =\n        movementData;\n      const { expandable, disabledItems, elementToItem, itemToElement } =\n        metadataLookup.current;\n      const itemId = elementToItem[activeDescendantId];\n      const item = data[itemId];\n\n      /* c8 ignore start */\n      if (!item) {\n        return;\n      }\n      /* c8 ignore stop */\n\n      const disabled = disabledItems[itemId];\n      const expanded = expandedIds.has(itemId);\n\n      let flagged = false;\n      switch (event.key) {\n        case \"ArrowLeft\":\n          if (expanded && !disabled) {\n            flagged = true;\n            toggleTreeItemExpansion(itemId);\n          } else if (item.parentId) {\n            // do not flag for this case since setFocusIndex already does this\n            const parentId = itemToElement[item.parentId];\n            const focusables = getVisibleTreeItems(event.currentTarget);\n            const index = focusables.findIndex(\n              (element) => element.id === parentId\n            );\n            setFocusIndex(index, focusables);\n          }\n\n          break;\n        case \"ArrowRight\":\n          if (expandable[itemId] && !disabled) {\n            if (!expanded) {\n              flagged = true;\n              toggleTreeItemExpansion(itemId);\n            } else {\n              // do not flag for this case since setFocusIndex already does this\n              const focusables = getVisibleTreeItems(event.currentTarget);\n              const index = getNextFocusableIndex({\n                loopable: false,\n                increment: true,\n                focusables,\n                includeDisabled: true,\n                currentFocusIndex: currentFocusIndex.current,\n              });\n\n              setFocusIndex(index, focusables);\n            }\n          }\n\n          break;\n        case \"*\": {\n          flagged = true;\n          const itemIds = treeItemChildIds.get(item.parentId);\n          if (itemIds) {\n            const expandableIds = [...itemIds].filter(\n              (itemId) => expandable[itemId]\n            );\n            if (expandableIds.length) {\n              expandMultipleTreeItems(\n                (prev) => new Set([...prev, ...expandableIds])\n              );\n              currentFocusIndex.current = -1;\n            }\n          }\n          break;\n        }\n      }\n\n      if (flagged) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    searchable: true,\n    tabIndexBehavior: \"virtual\",\n    getFocusableElements: getVisibleTreeItems,\n    getDefaultFocusedIndex(options) {\n      const { focusables } = options;\n      const { elementToItem } = metadataLookup.current;\n\n      return focusables.findIndex((element) =>\n        selectedIds.has(elementToItem[element.id])\n      );\n    },\n  });\n\n  return {\n    metadataLookup,\n    ...movement,\n  };\n}\n"],"names":["useRef","useKeyboardMovementProvider","getNextFocusableIndex","isParentItemCollapsing","item","closest","previousElementSibling","getAttribute","getVisibleTreeItems","container","items","querySelectorAll","filter","offsetParent","useTreeMovement","options","ref","onClick","onFocus","onKeyDown","data","expandedIds","selectedIds","treeItemChildIds","toggleTreeItemExpansion","expandMultipleTreeItems","metadataLookup","expandable","disabledItems","elementToItem","itemToElement","movement","extendKeyDown","movementData","event","activeDescendantId","currentFocusIndex","setFocusIndex","current","itemId","disabled","expanded","has","flagged","key","parentId","focusables","currentTarget","index","findIndex","element","id","loopable","increment","includeDisabled","itemIds","get","expandableIds","length","prev","Set","stopPropagation","preventDefault","searchable","tabIndexBehavior","getFocusableElements","getDefaultFocusedIndex"],"mappings":"AAAA;AAQA,SAASA,MAAM,QAAQ,QAAQ;AAG/B,SAASC,2BAA2B,QAAQ,6CAA6C;AACzF,SAASC,qBAAqB,QAAQ,uBAAuB;AAO7D;;;;;;;;;;;;CAYC,GACD,MAAMC,yBAAyB,CAACC,OAC9BA,KACGC,OAAO,CAAC,mBACPC,wBAAwBC,aAAa,qBAAqB;AAEhE;;;CAGC,GACD,MAAMC,sBAAsB,CAC1BC;IAEA,MAAMC,QAAQ;WACTD,UAAUE,gBAAgB,CAAc;KAC5C;IAED,OAAOD,MAAME,MAAM,CACjB,CAACR,OACC,yDAAyD;QACzDA,KAAKS,YAAY,IACjB,uDAAuD;QACvD,CAACV,uBAAuBC;AAE9B;AA6BA;;;CAGC,GACD,OAAO,SAASU,gBACdC,OAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGV;IAEJ,MAAMW,iBAAiB1B,OAA+B;QACpD2B,YAAY,CAAC;QACbC,eAAe,CAAC;QAChBC,eAAe,CAAC;QAChBC,eAAe,CAAC;IAClB;IACA,MAAMC,WAAW9B,4BAA4B;QAC3Ce;QACAC;QACAC;QACAC;QACAa,eAAcC,YAAY;YACxB,MAAM,EAAEC,KAAK,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,aAAa,EAAE,GACnEJ;YACF,MAAM,EAAEN,UAAU,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAC/DJ,eAAeY,OAAO;YACxB,MAAMC,SAASV,aAAa,CAACM,mBAAmB;YAChD,MAAM/B,OAAOgB,IAAI,CAACmB,OAAO;YAEzB,mBAAmB,GACnB,IAAI,CAACnC,MAAM;gBACT;YACF;YACA,kBAAkB,GAElB,MAAMoC,WAAWZ,aAAa,CAACW,OAAO;YACtC,MAAME,WAAWpB,YAAYqB,GAAG,CAACH;YAEjC,IAAII,UAAU;YACd,OAAQT,MAAMU,GAAG;gBACf,KAAK;oBACH,IAAIH,YAAY,CAACD,UAAU;wBACzBG,UAAU;wBACVnB,wBAAwBe;oBAC1B,OAAO,IAAInC,KAAKyC,QAAQ,EAAE;wBACxB,kEAAkE;wBAClE,MAAMA,WAAWf,aAAa,CAAC1B,KAAKyC,QAAQ,CAAC;wBAC7C,MAAMC,aAAatC,oBAAoB0B,MAAMa,aAAa;wBAC1D,MAAMC,QAAQF,WAAWG,SAAS,CAChC,CAACC,UAAYA,QAAQC,EAAE,KAAKN;wBAE9BR,cAAcW,OAAOF;oBACvB;oBAEA;gBACF,KAAK;oBACH,IAAInB,UAAU,CAACY,OAAO,IAAI,CAACC,UAAU;wBACnC,IAAI,CAACC,UAAU;4BACbE,UAAU;4BACVnB,wBAAwBe;wBAC1B,OAAO;4BACL,kEAAkE;4BAClE,MAAMO,aAAatC,oBAAoB0B,MAAMa,aAAa;4BAC1D,MAAMC,QAAQ9C,sBAAsB;gCAClCkD,UAAU;gCACVC,WAAW;gCACXP;gCACAQ,iBAAiB;gCACjBlB,mBAAmBA,kBAAkBE,OAAO;4BAC9C;4BAEAD,cAAcW,OAAOF;wBACvB;oBACF;oBAEA;gBACF,KAAK;oBAAK;wBACRH,UAAU;wBACV,MAAMY,UAAUhC,iBAAiBiC,GAAG,CAACpD,KAAKyC,QAAQ;wBAClD,IAAIU,SAAS;4BACX,MAAME,gBAAgB;mCAAIF;6BAAQ,CAAC3C,MAAM,CACvC,CAAC2B,SAAWZ,UAAU,CAACY,OAAO;4BAEhC,IAAIkB,cAAcC,MAAM,EAAE;gCACxBjC,wBACE,CAACkC,OAAS,IAAIC,IAAI;2CAAID;2CAASF;qCAAc;gCAE/CrB,kBAAkBE,OAAO,GAAG,CAAC;4BAC/B;wBACF;wBACA;oBACF;YACF;YAEA,IAAIK,SAAS;gBACXT,MAAM2B,eAAe;gBACrB3B,MAAM4B,cAAc;YACtB;QACF;QACAC,YAAY;QACZC,kBAAkB;QAClBC,sBAAsBzD;QACtB0D,wBAAuBnD,OAAO;YAC5B,MAAM,EAAE+B,UAAU,EAAE,GAAG/B;YACvB,MAAM,EAAEc,aAAa,EAAE,GAAGH,eAAeY,OAAO;YAEhD,OAAOQ,WAAWG,SAAS,CAAC,CAACC,UAC3B5B,YAAYoB,GAAG,CAACb,aAAa,CAACqB,QAAQC,EAAE,CAAC;QAE7C;IACF;IAEA,OAAO;QACLzB;QACA,GAAGK,QAAQ;IACb;AACF"}

package/dist/types.d.ts

@@ -182,6 +182,20 @@ export interface ElementSize {
     height: number;
     width: number;
 }
+/**
+ * @since 6.3.0
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * @since 6.3.0
+ */
+export interface MinMaxRange {
+    min: number;
+    max: number;
+}
 /**
  * @since 6.2.0
  */

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAiPA;;CAEC,GACD,WAAoE"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n  min: number;\n  max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAiQA;;CAEC,GACD,WAAoE"}

package/dist/typography/Mark.d.ts

@@ -1,8 +1,11 @@
 import { type HTMLAttributes, type ReactNode } from "react";
+import { type MarkClassNameOptions } from "./markStyles.js";
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends MarkClassNameOptions for CSSProperties module
+ * augmentation.
  */
-export interface MarkProps extends HTMLAttributes<HTMLElement> {
+export interface MarkProps extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {
     children: ReactNode;
 }
 /**

package/dist/typography/Mark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Mark.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { mark } from \"./markStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MarkProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\n/**\n * The `Mark` component can be used in place of the `mark` HTMLElement with\n * some default styles.\n *\n * @example Simple Example\n * ```tsx\n * import { Mark } from \"@react-md/core/typography/Mark\";\n *\n * export function Example() {\n *   return (\n *     <>\n *       Some text <Mark>that has highlights</Mark> and some other text.\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/mark | Mark Demos}\n * @since 6.0.0\n */\nexport const Mark = forwardRef<HTMLElement, MarkProps>(\n  function Mark(props, ref) {\n    const { children, className, ...remaining } = props;\n    return (\n      <mark {...remaining} ref={ref} className={mark({ className })}>\n        {children}\n      </mark>\n    );\n  }\n);\n"],"names":["forwardRef","mark","Mark","props","ref","children","className","remaining"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,IAAI,QAAQ,kBAAkB;AASvC;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACF;QAAM,GAAGM,SAAS;QAAEH,KAAKA;QAAKE,WAAWL,KAAK;YAAEK;QAAU;kBACxDD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Mark.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type MarkClassNameOptions, mark } from \"./markStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends MarkClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface MarkProps\n  extends HTMLAttributes<HTMLElement>,\n    MarkClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * The `Mark` component can be used in place of the `mark` HTMLElement with\n * some default styles.\n *\n * @example Simple Example\n * ```tsx\n * import { Mark } from \"@react-md/core/typography/Mark\";\n *\n * export function Example() {\n *   return (\n *     <>\n *       Some text <Mark>that has highlights</Mark> and some other text.\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/mark | Mark Demos}\n * @since 6.0.0\n */\nexport const Mark = forwardRef<HTMLElement, MarkProps>(\n  function Mark(props, ref) {\n    const { children, className, ...remaining } = props;\n    return (\n      <mark {...remaining} ref={ref} className={mark({ className })}>\n        {children}\n      </mark>\n    );\n  }\n);\n"],"names":["forwardRef","mark","Mark","props","ref","children","className","remaining"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAoCC,IAAI,QAAQ,kBAAkB;AAalE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACF;QAAM,GAAGM,SAAS;QAAEH,KAAKA;QAAKE,WAAWL,KAAK;YAAEK;QAAU;kBACxDD;;AAGP,GACA"}

package/dist/typography/TextContainer.d.ts

@@ -1,11 +1,5 @@
 import { type HTMLAttributes } from "react";
 import { type TextContainerClassNameOptions } from "./textContainerStyles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-line-length"?: string | number;
-        "--rmd-text-container-padding"?: string | number;
-    }
-}
 /**
  * @since 6.0.0 Removed the `size` option since there is no longer a
  * different line-length for mobile and desktop.

package/dist/typography/TextContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type TextContainerClassNameOptions,\n  textContainer,\n} from \"./textContainerStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-line-length\"?: string | number;\n    \"--rmd-text-container-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextContainerClassNameOptions {}\n\n/**\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer } from \"@react-md/core/typography/TextContainer\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-container | TextContainer Demos}\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n  function TextContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={textContainer({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,aAAa,QACR,2BAA2B;AAmBlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/TextContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type TextContainerClassNameOptions,\n  textContainer,\n} from \"./textContainerStyles.js\";\n\n/**\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport interface TextContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    TextContainerClassNameOptions {}\n\n/**\n * This component should be used to render text based content with an\n * appropriate max line length to optimize legibility.\n *\n * @example Simple Example\n * ```tsx\n * import { TextContainer } from \"@react-md/core/typography/TextContainer\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <TextContainer>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </TextContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/text-container | TextContainer Demos}\n * @see {@link textContainer} If you only want to apply this class to an\n * element.\n * @since 6.0.0 Removed the `size` option since there is no longer a\n * different line-length for mobile and desktop.\n * @since 6.0.0 Removed the `clone` prop and the children render function\n * behavior. Use the `textContainer` class name utility instead.\n */\nexport const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(\n  function TextContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={textContainer({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","textContainer","TextContainer","props","ref","className","children","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,aAAa,QACR,2BAA2B;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,cAAc;YAAEI;QAAU;kBAChEC;;AAGP,GACA"}

package/dist/typography/markStyles.d.ts

@@ -1,3 +1,8 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-mark-color"?: string;
+    }
+}
 /**
  * @since 6.0.0
  */

package/dist/typography/markStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/markStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-mark\");\n\n/**\n * @since 6.0.0\n */\nexport interface MarkClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function mark(options: MarkClassNameOptions = {}): string {\n  const { className } = options;\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","mark","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,OAAOJ,IAAIE,UAAUG;AACvB"}
+{"version":3,"sources":["../../src/typography/markStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-mark\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-mark-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MarkClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function mark(options: MarkClassNameOptions = {}): string {\n  const { className } = options;\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","mark","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAenB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,OAAOJ,IAAIE,UAAUG;AACvB"}

package/dist/typography/textContainerStyles.d.ts

@@ -1,3 +1,9 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-line-length"?: string | number;
+        "--rmd-text-container-padding"?: string | number;
+    }
+}
 /**
  * @since 6.0.0
  */

package/dist/typography/textContainerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n  /**\n   * An optional className to merge with typography text container styles.\n   */\n  className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer } from \"@react-md/core/typography/textContainerStyles\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <main className={textContainer()}>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </main>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n  options: TextContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}
+{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-text-container\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-line-length\"?: string | number;\n    \"--rmd-text-container-padding\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n  /**\n   * An optional className to merge with typography text container styles.\n   */\n  className?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { textContainer } from \"@react-md/core/typography/textContainerStyles\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <main className={textContainer()}>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </main>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function textContainer(\n  options: TextContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAmBnB;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}

package/dist/typography/typographyStyles.d.ts

@@ -1,4 +1,13 @@
 import { type TextCssUtilsOptions } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-font-size"?: string;
+        "--rmd-font-family"?: string;
+        "--rmd-font-weight"?: string | number;
+        "--rmd-font-height"?: string | number;
+        "--rmd-font-line-height"?: string | number;
+    }
+}
 /**
  * A union of all the material design provided typography styles. When used with
  * the Typography component, this will generate the correct typography className

package/dist/typography/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextCssUtilsOptions, cssUtils } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example Simple Example\n * ```ts\n * import { typography } from \"@react-md/core/typography/typographyStyles\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core/typography/typographyStyles\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n"],"names":["cnb","cssUtils","typography","options","type"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAAmCC,QAAQ,QAAQ,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,MAAM,EACjCH,SAASE;AAEb"}
+{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextCssUtilsOptions, cssUtils } from \"../cssUtils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-font-size\"?: string;\n    \"--rmd-font-family\"?: string;\n    \"--rmd-font-weight\"?: string | number;\n    \"--rmd-font-height\"?: string | number;\n    \"--rmd-font-line-height\"?: string | number;\n  }\n}\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example Simple Example\n * ```ts\n * import { typography } from \"@react-md/core/typography/typographyStyles\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core/typography/typographyStyles\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n"],"names":["cnb","cssUtils","typography","options","type"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAAmCC,QAAQ,QAAQ,iBAAiB;AA2DpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,MAAM,EACjCH,SAASE;AAEb"}