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

package/dist/transition/useCrossFadeTransition.js

@@ -1,73 +1,41 @@
 "use client";
 import { useCSSTransition } from "./useCSSTransition.js";
+/**
+ * The default cross fade transition timeout.
+ *
+ * @since 2.0.0
+ * @since 6.0.0 Renamed from `CROSS_FADE_TIMEOUT` to
+ * `DEFAULT_CROSS_FADE_TIMEOUT`
+ */ export const DEFAULT_CROSS_FADE_TIMEOUT = {
+    appear: 300,
+    enter: 300,
+    exit: 0
+};
 /**
  * The default cross fade transition classes to use.
  *
  * @since 2.0.0
- */ export const CROSS_FADE_CLASSNAMES = {
+ * @since 6.0.0 Renamed from `CROSS_FADE_CLASSNAMES` to
+ * `DEFAULT_CROSS_FADE_CLASSNAMES`.
+ */ export const DEFAULT_CROSS_FADE_CLASSNAMES = {
     appear: "rmd-cross-fade",
     appearActive: "rmd-cross-fade--active",
     enter: "rmd-cross-fade",
     enterActive: "rmd-cross-fade--active"
 };
-/**
- * The default cross fade transition timeout.
- *
- * @since 2.0.0
- */ export const CROSS_FADE_TIMEOUT = {
-    appear: 300,
-    enter: 300,
-    exit: 0
-};
 /**
  * This hook is used to create a "cross fade" transition -- a transition that
  * gradually increases the opacity and transforms the element vertically a short
  * distance. This is generally used for full page transitions when a route
  * changes.
  *
- * @example New Page Transition with the Layout component
- * ```tsx
- * import { ReactElement, ReactNode, useLayoutEffect } from "react";
- * import { useLocation } from "react-router-dom":
- * import { Layout, useCrossFadeTransition, useLayoutNavigation } from "@react-md/core";
- *
- * import { navItems } from "./navItems";
- *
- * interface ExampleProps {
- *   children: ReactNode;
- * }
- *
- * function Example({ children }: ExampleProps): ReactElement {
- *   const { pathname } = useLocation();
- *   const { elementProps, transitionTo } = useCrossFadeTransition();
- *
- *   const prevPathname = useRef(pathname);
- *   useLayoutEffect(() => {
- *     if (prevPathname.current === pathname) {
- *       return
- *     }
- *
- *     prevPathname.current = pathname;
- *     transitionTo('enter');
- *   }, [pathname, transitionTo])
- *
- *   return (
- *     <Layout
- *       {...useLayoutNavigation(navItems, pathname)}
- *       appBarTitle="My App"
- *       mainProps={elementProps}
- *     >
- *       {children}
- *     </Layout>
- *   );
- * }
- * ```
- *
+ * @see {@link https://next.react-md.dev/hooks/use-cross-fade-transition | useCrossFadeTransition Demos}
+ * @see {@link https://next.react-md.dev/components/cross-fade | CrossFade Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0
  */ export function useCrossFadeTransition(options = {}) {
-    const { appear = false, transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
+    const { appear = false, transitionIn = true, timeout = DEFAULT_CROSS_FADE_TIMEOUT, classNames = DEFAULT_CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
     return useCSSTransition({
         ...cssOptions,
         appear,

package/dist/transition/useCrossFadeTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionInDefaultedOptions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default cross fade transition classes to use.\n *\n * @since 2.0.0\n */\nexport const CROSS_FADE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n  appear: \"rmd-cross-fade\",\n  appearActive: \"rmd-cross-fade--active\",\n  enter: \"rmd-cross-fade\",\n  enterActive: \"rmd-cross-fade--active\",\n};\n\n/**\n * The default cross fade transition timeout.\n *\n * @since 2.0.0\n */\nexport const CROSS_FADE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n  appear: 300,\n  enter: 300,\n  exit: 0,\n};\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CrossFadeTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /**\n   * @see {@link TransitionTimeout}\n   * @see {@link CROSS_FADE_TIMEOUT}\n   * @defaultValue `CROSS_FADE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionClassNames}\n   * @see {@link CROSS_FADE_CLASSNAMES}\n   * @defaultValue `CROSS_FADE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionInDefaultedOptions.transitionIn}\n   * @defaultValue `true`\n   */\n  transitionIn?: boolean;\n}\n\n/**\n * This hook is used to create a \"cross fade\" transition -- a transition that\n * gradually increases the opacity and transforms the element vertically a short\n * distance. This is generally used for full page transitions when a route\n * changes.\n *\n * @example New Page Transition with the Layout component\n * ```tsx\n * import { ReactElement, ReactNode, useLayoutEffect } from \"react\";\n * import { useLocation } from \"react-router-dom\":\n * import { Layout, useCrossFadeTransition, useLayoutNavigation } from \"@react-md/core\";\n *\n * import { navItems } from \"./navItems\";\n *\n * interface ExampleProps {\n *   children: ReactNode;\n * }\n *\n * function Example({ children }: ExampleProps): ReactElement {\n *   const { pathname } = useLocation();\n *   const { elementProps, transitionTo } = useCrossFadeTransition();\n *\n *   const prevPathname = useRef(pathname);\n *   useLayoutEffect(() => {\n *     if (prevPathname.current === pathname) {\n *       return\n *     }\n *\n *     prevPathname.current = pathname;\n *     transitionTo('enter');\n *   }, [pathname, transitionTo])\n *\n *   return (\n *     <Layout\n *       {...useLayoutNavigation(navItems, pathname)}\n *       appBarTitle=\"My App\"\n *       mainProps={elementProps}\n *     >\n *       {children}\n *     </Layout>\n *   );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCrossFadeTransition<E extends HTMLElement>(\n  options: CrossFadeTransitionHookOptions<E> = {}\n): CSSTransitionHookReturnValue<E> {\n  const {\n    appear = false,\n    transitionIn = true,\n    timeout = CROSS_FADE_TIMEOUT,\n    classNames = CROSS_FADE_CLASSNAMES,\n    ...cssOptions\n  } = options;\n\n  return useCSSTransition({\n    ...cssOptions,\n    appear,\n    timeout,\n    classNames,\n    transitionIn,\n  });\n}\n"],"names":["useCSSTransition","CROSS_FADE_CLASSNAMES","appear","appearActive","enter","enterActive","CROSS_FADE_TIMEOUT","exit","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"mappings":"AAAA;AAUA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;CAIC,GACD,OAAO,MAAMC,wBAAiE;IAC5EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;AACf,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,qBAAwD;IACnEJ,QAAQ;IACRE,OAAO;IACPG,MAAM;AACR,EAAE;AA8BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJP,SAAS,KAAK,EACdQ,eAAe,IAAI,EACnBC,UAAUL,kBAAkB,EAC5BM,aAAaX,qBAAqB,EAClC,GAAGY,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;QACbX;QACAS;QACAC;QACAF;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionInDefaultedOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default cross fade transition timeout.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_TIMEOUT` to\n * `DEFAULT_CROSS_FADE_TIMEOUT`\n */\nexport const DEFAULT_CROSS_FADE_TIMEOUT = {\n  appear: 300,\n  enter: 300,\n  exit: 0,\n} as const satisfies TransitionTimeout;\n\n/**\n * The default cross fade transition classes to use.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_CLASSNAMES` to\n * `DEFAULT_CROSS_FADE_CLASSNAMES`.\n */\nexport const DEFAULT_CROSS_FADE_CLASSNAMES = {\n  appear: \"rmd-cross-fade\",\n  appearActive: \"rmd-cross-fade--active\",\n  enter: \"rmd-cross-fade\",\n  enterActive: \"rmd-cross-fade--active\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CrossFadeTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /**\n   * @see {@link TransitionTimeout}\n   * @see {@link DEFAULT_CROSS_FADE_TIMEOUT}\n   * @defaultValue `CROSS_FADE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionClassNames}\n   * @see {@link DEFAULT_CROSS_FADE_CLASSNAMES}\n   * @defaultValue `CROSS_FADE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionInDefaultedOptions.transitionIn}\n   * @defaultValue `true`\n   */\n  transitionIn?: boolean;\n}\n\n/**\n * This hook is used to create a \"cross fade\" transition -- a transition that\n * gradually increases the opacity and transforms the element vertically a short\n * distance. This is generally used for full page transitions when a route\n * changes.\n *\n * @see {@link https://next.react-md.dev/hooks/use-cross-fade-transition | useCrossFadeTransition Demos}\n * @see {@link https://next.react-md.dev/components/cross-fade | CrossFade Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCrossFadeTransition<E extends HTMLElement>(\n  options: CrossFadeTransitionHookOptions<E> = {}\n): CSSTransitionHookReturnValue<E> {\n  const {\n    appear = false,\n    transitionIn = true,\n    timeout = DEFAULT_CROSS_FADE_TIMEOUT,\n    classNames = DEFAULT_CROSS_FADE_CLASSNAMES,\n    ...cssOptions\n  } = options;\n\n  return useCSSTransition({\n    ...cssOptions,\n    appear,\n    timeout,\n    classNames,\n    transitionIn,\n  });\n}\n"],"names":["useCSSTransition","DEFAULT_CROSS_FADE_TIMEOUT","appear","enter","exit","DEFAULT_CROSS_FADE_CLASSNAMES","appearActive","enterActive","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,6BAA6B;IACxCC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;CAMC,GACD,OAAO,MAAMC,gCAAgC;IAC3CH,QAAQ;IACRI,cAAc;IACdH,OAAO;IACPI,aAAa;AACf,EAA6C;AA8B7C;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJP,SAAS,KAAK,EACdQ,eAAe,IAAI,EACnBC,UAAUV,0BAA0B,EACpCW,aAAaP,6BAA6B,EAC1C,GAAGQ,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;QACbX;QACAS;QACAC;QACAF;IACF;AACF"}

package/dist/transition/useScaleTransition.d.ts

@@ -1,13 +1,25 @@
 import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions } from "./types.js";
+/**
+ * The default {@link TransitionTimeout} to use for horizontal and vertical
+ * scale transitions.
+ *
+ * @since 2.0.0
+ * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.
+ */
+export declare const DEFAULT_SCALE_TIMEOUT: {
+    readonly enter: 200;
+    readonly exit: 150;
+};
 /**
  * The default {@link CSSTransitionClassNames} for a horizontal scale
  * transition.
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-transition`
+ * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to
+ * `DEFAULT_SCALE_CLASSNAMES`.
  */
-export declare const SCALE_CLASSNAMES: {
+export declare const DEFAULT_SCALE_CLASSNAMES: {
     readonly appear: "rmd-scale-transition--enter";
     readonly appearActive: "rmd-scale-transition--enter-active";
     readonly enter: "rmd-scale-transition--enter";
@@ -21,9 +33,11 @@ export declare const SCALE_CLASSNAMES: {
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}
+ * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}.
+ * It was also renamed from `SCALE_Y_CLASSNAMES` to
+ * `DEFAULT_SCALE_Y_CLASSNAMES`.
  */
-export declare const SCALE_Y_CLASSNAMES: {
+export declare const DEFAULT_SCALE_Y_CLASSNAMES: {
     readonly appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter";
     readonly appearActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active";
     readonly enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter";
@@ -32,16 +46,6 @@ export declare const SCALE_Y_CLASSNAMES: {
     readonly exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit";
     readonly exitActive: "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active";
 };
-/**
- * The default {@link TransitionTimeout} to use for horizontal and vertical
- * scale transitions.
- *
- * @since 2.0.0
- */
-export declare const SCALE_TIMEOUT: {
-    readonly enter: 200;
-    readonly exit: 150;
-};
 /**
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
@@ -62,8 +66,8 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement> extends Preco
     temporary?: boolean;
     /**
      * @see {@link vertical}
-     * @see {@link SCALE_CLASSNAMES}
-     * @see {@link SCALE_Y_CLASSNAMES}
+     * @see {@link DEFAULT_SCALE_CLASSNAMES}
+     * @see {@link DEFAULT_SCALE_Y_CLASSNAMES}
      * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`
      */
     classNames?: CSSTransitionClassNames;
@@ -106,6 +110,8 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement> extends Preco
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}
+ * @see {@link https://next.react-md.dev/components/scale | Scale Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0

package/dist/transition/useScaleTransition.js

@@ -1,13 +1,24 @@
 "use client";
 import { useCSSTransition } from "./useCSSTransition.js";
+/**
+ * The default {@link TransitionTimeout} to use for horizontal and vertical
+ * scale transitions.
+ *
+ * @since 2.0.0
+ * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.
+ */ export const DEFAULT_SCALE_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
 /**
  * The default {@link CSSTransitionClassNames} for a horizontal scale
  * transition.
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-transition`
- */ export const SCALE_CLASSNAMES = {
+ * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to
+ * `DEFAULT_SCALE_CLASSNAMES`.
+ */ export const DEFAULT_SCALE_CLASSNAMES = {
     appear: "rmd-scale-transition--enter",
     appearActive: "rmd-scale-transition--enter-active",
     enter: "rmd-scale-transition--enter",
@@ -21,8 +32,10 @@ import { useCSSTransition } from "./useCSSTransition.js";
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}
- */ export const SCALE_Y_CLASSNAMES = {
+ * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}.
+ * It was also renamed from `SCALE_Y_CLASSNAMES` to
+ * `DEFAULT_SCALE_Y_CLASSNAMES`.
+ */ export const DEFAULT_SCALE_Y_CLASSNAMES = {
     appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
     appearActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active",
     enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
@@ -31,15 +44,6 @@ import { useCSSTransition } from "./useCSSTransition.js";
     exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit",
     exitActive: "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active"
 };
-/**
- * The default {@link TransitionTimeout} to use for horizontal and vertical
- * scale transitions.
- *
- * @since 2.0.0
- */ export const SCALE_TIMEOUT = {
-    enter: 200,
-    exit: 150
-};
 /**
  * Implements a scale transition that should generally be used for temporary
  * elements that are positioned via `position: absolute` or `position: fixed`.
@@ -78,11 +82,13 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}
+ * @see {@link https://next.react-md.dev/components/scale | Scale Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
  */ export function useScaleTransition(options) {
-    const { timeout = SCALE_TIMEOUT, vertical = false, temporary = true, exitedHidden = true, classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES, ...transitionOptions } = options;
+    const { timeout = DEFAULT_SCALE_TIMEOUT, vertical = false, temporary = true, exitedHidden = true, classNames = vertical ? DEFAULT_SCALE_Y_CLASSNAMES : DEFAULT_SCALE_CLASSNAMES, ...transitionOptions } = options;
     return useCSSTransition({
         ...transitionOptions,
         timeout,

package/dist/transition/useScaleTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition`\n */\nexport const SCALE_CLASSNAMES = {\n  appear: \"rmd-scale-transition--enter\",\n  appearActive: \"rmd-scale-transition--enter-active\",\n  enter: \"rmd-scale-transition--enter\",\n  enterActive: \"rmd-scale-transition--enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit\",\n  exitActive: \"rmd-scale-transition--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * The default {@link CSSTransitionClassNames} for a vertical scale transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}\n */\nexport const SCALE_Y_CLASSNAMES = {\n  appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  appearActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  enterActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n  exitActive:\n    \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n */\nexport const SCALE_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E> {\n  /**\n   * Boolean if the scale transition should be vertical instead of horizontal.\n   * This really only changes the default value for the {@link classNames}.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @see {@link vertical}\n   * @see {@link SCALE_CLASSNAMES}\n   * @see {@link SCALE_Y_CLASSNAMES}\n   * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const buttonRef = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo: buttonRef,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     vertical: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Some content within a menu\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n  options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    temporary,\n    exitedHidden,\n    classNames,\n  });\n}\n"],"names":["useCSSTransition","SCALE_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","SCALE_Y_CLASSNAMES","SCALE_TIMEOUT","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAAmB;IAC9BC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAA6C;AAE7C;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB;IAChCP,QAAQ;IACRC,cACE;IACFC,OAAO;IACPC,aACE;IACFC,WAAW;IACXC,MAAM;IACNC,YACE;AACJ,EAA6C;AAE7C;;;;;CAKC,GACD,OAAO,MAAME,gBAAgB;IAC3BN,OAAO;IACPG,MAAM;AACR,EAAuC;AAgCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WAAWL,qBAAqBR,gBAAgB,EAC7D,GAAGiB,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.\n */\nexport const DEFAULT_SCALE_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/**\n * The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to\n * `DEFAULT_SCALE_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_CLASSNAMES = {\n  appear: \"rmd-scale-transition--enter\",\n  appearActive: \"rmd-scale-transition--enter-active\",\n  enter: \"rmd-scale-transition--enter\",\n  enterActive: \"rmd-scale-transition--enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit\",\n  exitActive: \"rmd-scale-transition--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * The default {@link CSSTransitionClassNames} for a vertical scale transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}.\n * It was also renamed from `SCALE_Y_CLASSNAMES` to\n * `DEFAULT_SCALE_Y_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_Y_CLASSNAMES = {\n  appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  appearActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  enterActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n  exitActive:\n    \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E> {\n  /**\n   * Boolean if the scale transition should be vertical instead of horizontal.\n   * This really only changes the default value for the {@link classNames}.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @see {@link vertical}\n   * @see {@link DEFAULT_SCALE_CLASSNAMES}\n   * @see {@link DEFAULT_SCALE_Y_CLASSNAMES}\n   * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const buttonRef = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo: buttonRef,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     vertical: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Some content within a menu\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}\n * @see {@link https://next.react-md.dev/components/scale | Scale Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n  options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical\n      ? DEFAULT_SCALE_Y_CLASSNAMES\n      : DEFAULT_SCALE_CLASSNAMES,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    temporary,\n    exitedHidden,\n    classNames,\n  });\n}\n"],"names":["useCSSTransition","DEFAULT_SCALE_TIMEOUT","enter","exit","DEFAULT_SCALE_CLASSNAMES","appear","appearActive","enterActive","enterDone","exitActive","DEFAULT_SCALE_Y_CLASSNAMES","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbC,WAAW;IACXL,MAAM;IACNM,YAAY;AACd,EAA6C;AAE7C;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B;IACxCL,QAAQ;IACRC,cACE;IACFJ,OAAO;IACPK,aACE;IACFC,WAAW;IACXL,MAAM;IACNM,YACE;AACJ,EAA6C;AAgC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUZ,qBAAqB,EAC/Ba,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WACTJ,6BACAN,wBAAwB,EAC5B,GAAGc,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}

package/dist/transition/useSkeletonPlaceholder.d.ts

@@ -48,7 +48,7 @@ export interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOpt
      * @example No Inline Width
      * ```ts
      * import type { ReactElement } from "@react";
-     * import { useSkeletonPlaceholder } from "@react-md/core";
+     * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * import styles from "./MyComponent.module.scss";
      *
@@ -69,7 +69,7 @@ export interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOpt
      * @example Custom Inline Width
      * ```ts
      * import type { ReactElement } from "@react";
-     * import { useSkeletonPlaceholder } from "@react-md/core";
+     * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * export function Example(): ReactElement {
      *   const skeletonProps = useSkeletonPlaceholder({
@@ -102,7 +102,7 @@ export interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOpt
      * @example Pre-rendered Layout
      * ```tsx
      * import type { ReactElement } from "@react";
-     * import { SkeletonPlaceholder } from "@react-md/core";
+     * import { SkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * interface Data {
      *   id: string;
@@ -200,6 +200,9 @@ export interface SkeletonPlaceholderStylingProps {
  *   return <div style={style} className={className} />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
  * @since 6.0.0
  */
 export declare function useSkeletonPlaceholder(options?: SkeletonPlaceholderOptions): SkeletonPlaceholderStylingProps;

package/dist/transition/useSkeletonPlaceholder.js

@@ -14,6 +14,9 @@ import { randomSkeletonPlaceholder, skeletonPlaceholder } from "./skeletonPlaceh
  *   return <div style={style} className={className} />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
  * @since 6.0.0
  */ export function useSkeletonPlaceholder(options = {}) {
     const { style: propStyle, className, height, width: propWidth, disabled = false, delay: propDelay, minDelay, maxDelay, minPercentage, maxPercentage } = options;

package/dist/transition/useSkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type SkeletonPlaceholderRandomOptions,\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions\n  extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * interface Data {\n   *   id: string;\n   *   name: string;\n   *   createdBy: string\n   *   createdOn: string;\n   *   modifiedBy: string;\n   *   modifiedOn: string;\n   * }\n   *\n   * function ShowData({\n   *   id,\n   *   name,\n   *   createdBy,\n   *   createdOn,\n   *   modifiedBy,\n   *   modifiedOn,\n   * }: Partial<Data>:: ReactElement {\n   *   const loading =\n   *     !name &&\n   *     !createdBy &&\n   *     !createdOn &&\n   *     !modifiedBy &&\n   *     !modifiedOn;\n   *\n   *   return (\n   *     <Box grid gridClassName=\"custom-class-name\">\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {id}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {name}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdBy}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedBy}\n   *       </SkeletonPlaceholder>\n   *     </Box>\n   *   );\n   * }\n   *\n   * export function Example(): ReactElement {\n   *   const { data } = useLoadSomeDataQuery();\n   *\n   *   const items = useMemo(() => {\n   *     // if the data has been fetched, just return the data\n   *     if (data) {\n   *       return data;\n   *     }\n   *\n   *     // if the data does not exist, set up a skeleton of your layout by\n   *     // rendering a random number of items.\n   *     //\n   *     // NOTE: This is memoized so you don't create a random length each\n   *     // render\n   *     const length = randomInt({ min: 3, max: 10 })\n   *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n   *   }, [data])\n   *\n   *   return (\n   *     <List>\n   *       {items.map((item) => <ShowData {...item} />)}\n   *     </List>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n * import { type ReactElement } from \"react\";\n *\n * export default function UsingTheHookExample(): ReactElement {\n *   const { style, className } = useSkeletonPlaceholder();\n *   return <div style={style} className={className} />;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = typeof propWidth !== \"undefined\";\n  const isDefinedDelay = typeof propDelay !== \"undefined\";\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (typeof window === \"undefined\" || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || typeof height !== \"undefined\") {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","isDefinedDelay","randomStyles","setRandomStyles","window","animationDelay"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA6BC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,yBAAyB,EACzBC,mBAAmB,QACd,gCAAgC;AAsMvC;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiB,OAAOT,cAAc;IAC5C,MAAMU,iBAAiB,OAAOP,cAAc;IAC5C,MAAM,CAACQ,cAAcC,gBAAgB,GAAGvB,SAAwB;QAC9D,IAAI,OAAOwB,WAAW,eAAeL,OAAOP,UAAU;YACpD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaS,kBAAkBD,gBAAiB;YAC1D;QACF;QAEAG,gBACErB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAS;QACAD;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIc,iBAAiBX;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACS,gBAAgB;YAClB,CAAA,EAAEI,cAAc,EAAE,GAAGH,YAAW;QACnC;QACA,IAAI,CAACF,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGY,YAAW;QAC1B;IACF;IAEA,IAAIhB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACe,kBAAkB,OAAOhB,WAAW,aAAa;QAChEH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEe,gBAAgBA,kBAAkBnB,OAAOmB;QAC3C;IACF;IAEA,OAAO;QACLnB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}
+{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type SkeletonPlaceholderRandomOptions,\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions\n  extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * interface Data {\n   *   id: string;\n   *   name: string;\n   *   createdBy: string\n   *   createdOn: string;\n   *   modifiedBy: string;\n   *   modifiedOn: string;\n   * }\n   *\n   * function ShowData({\n   *   id,\n   *   name,\n   *   createdBy,\n   *   createdOn,\n   *   modifiedBy,\n   *   modifiedOn,\n   * }: Partial<Data>:: ReactElement {\n   *   const loading =\n   *     !name &&\n   *     !createdBy &&\n   *     !createdOn &&\n   *     !modifiedBy &&\n   *     !modifiedOn;\n   *\n   *   return (\n   *     <Box grid gridClassName=\"custom-class-name\">\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {id}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {name}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdBy}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedBy}\n   *       </SkeletonPlaceholder>\n   *     </Box>\n   *   );\n   * }\n   *\n   * export function Example(): ReactElement {\n   *   const { data } = useLoadSomeDataQuery();\n   *\n   *   const items = useMemo(() => {\n   *     // if the data has been fetched, just return the data\n   *     if (data) {\n   *       return data;\n   *     }\n   *\n   *     // if the data does not exist, set up a skeleton of your layout by\n   *     // rendering a random number of items.\n   *     //\n   *     // NOTE: This is memoized so you don't create a random length each\n   *     // render\n   *     const length = randomInt({ min: 3, max: 10 })\n   *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n   *   }, [data])\n   *\n   *   return (\n   *     <List>\n   *       {items.map((item) => <ShowData {...item} />)}\n   *     </List>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n * import { type ReactElement } from \"react\";\n *\n * export default function UsingTheHookExample(): ReactElement {\n *   const { style, className } = useSkeletonPlaceholder();\n *   return <div style={style} className={className} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}\n * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = typeof propWidth !== \"undefined\";\n  const isDefinedDelay = typeof propDelay !== \"undefined\";\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (typeof window === \"undefined\" || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || typeof height !== \"undefined\") {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","isDefinedDelay","randomStyles","setRandomStyles","window","animationDelay"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA6BC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,yBAAyB,EACzBC,mBAAmB,QACd,gCAAgC;AAsMvC;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiB,OAAOT,cAAc;IAC5C,MAAMU,iBAAiB,OAAOP,cAAc;IAC5C,MAAM,CAACQ,cAAcC,gBAAgB,GAAGvB,SAAwB;QAC9D,IAAI,OAAOwB,WAAW,eAAeL,OAAOP,UAAU;YACpD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaS,kBAAkBD,gBAAiB;YAC1D;QACF;QAEAG,gBACErB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAS;QACAD;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIc,iBAAiBX;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACS,gBAAgB;YAClB,CAAA,EAAEI,cAAc,EAAE,GAAGH,YAAW;QACnC;QACA,IAAI,CAACF,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGY,YAAW;QAC1B;IACF;IAEA,IAAIhB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACe,kBAAkB,OAAOhB,WAAW,aAAa;QAChEH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEe,gBAAgBA,kBAAkBnB,OAAOmB;QAC3C;IACF;IAEA,OAAO;QACLnB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}

package/dist/transition/useSlideTransition.d.ts

@@ -1,8 +1,13 @@
-import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout } from "./types.js";
+import { type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions } from "./types.js";
 /** @since 6.0.0 */
-export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout>;
+export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: 150;
 /** @since 6.0.0 */
-export declare const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+export declare const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: {
+    readonly enter: "rmd-slide--enter";
+    readonly enterActive: "rmd-slide--enter-active rmd-slide--animate";
+    readonly exit: "rmd-slide--exit";
+    readonly exitActive: "rmd-slide--exit-active rmd-slide--animate";
+};
 /** @since 6.0.0 */
 export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTransitionOptions<E>;
 /**
@@ -63,6 +68,7 @@ export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTran
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} and {@link Slide} for convenient default
  * implementations.
  * @since 6.0.0

package/dist/transition/useSlideTransition.js

@@ -66,6 +66,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} and {@link Slide} for convenient default
  * implementations.
  * @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 type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =\n  {\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  };\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 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,mCAAgE,IAAI;AAEjF,iBAAiB,GACjB,OAAO,MAAMC,sCACX;IACEC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,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/** @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://next.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"}

package/dist/transition/useTransition.d.ts

@@ -4,6 +4,7 @@ import type { TransitionHookOptions, TransitionHookReturnValue } from "./types.j
  * since this is just a low-level hook that can be used to transition using
  * timeouts.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-transition | useTransition Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0

package/dist/transition/useTransition.js

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useReducer, useRef, useState } from "react";
+import { useReducer, useRef, useState } from "react";
 import { useSsr } from "../SsrProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
@@ -18,6 +18,7 @@ const noop = ()=>{
  * since this is just a low-level hook that can be used to transition using
  * timeouts.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-transition | useTransition Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
@@ -132,7 +133,7 @@ const noop = ()=>{
     const isFirstRender = useRef(true);
     const isRehydrateAppear = useRef(ssr && !transitionIn);
     const defaultTransitionIn = useRef(transitionIn);
-    useEffect(()=>{
+    useIsomorphicLayoutEffect(()=>{
         const { timeout, reflow, onEnter, onEntering, onEntered, onExit, onExiting } = configurationRef.current;
         let { onExited } = configurationRef.current;
         if (isFirstRender.current) {

package/dist/transition/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useReducer, useRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { TRANSITION_CONFIG } from \"./config.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear && !TRANSITION_CONFIG.disabled ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"entered\";\n        } else {\n          onEnter(appearing);\n          nextStage = \"entering\";\n        }\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"exited\";\n        } else {\n          onExit();\n          nextStage = \"exiting\";\n        }\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useEffect","useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","TRANSITION_CONFIG","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","disabled","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { useReducer, useRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { TRANSITION_CONFIG } from \"./config.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @see {@link https://next.react-md.dev/hooks/use-transition | useTransition Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear && !TRANSITION_CONFIG.disabled ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useIsomorphicLayoutEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"entered\";\n        } else {\n          onEnter(appearing);\n          nextStage = \"entering\";\n        }\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"exited\";\n        } else {\n          onExit();\n          nextStage = \"exiting\";\n        }\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","TRANSITION_CONFIG","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","disabled","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}

package/dist/tree/DefaultTreeItemRenderer.d.ts

@@ -10,6 +10,7 @@ import { type DefaultTreeItemNode, type TreeItemNode, type TreeItemRendererProps
  * Look at the `Tree` component for an example of creating a custom
  * implementation.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */
 export declare function DefaultTreeItemRenderer<T extends TreeItemNode = DefaultTreeItemNode>(props: TreeItemRendererProps<T>): ReactElement;

package/dist/tree/DefaultTreeItemRenderer.js

@@ -10,6 +10,7 @@ import { TreeItem } from "./TreeItem.js";
  * Look at the `Tree` component for an example of creating a custom
  * implementation.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */ export function DefaultTreeItemRenderer(props) {
     const { parents, children: childItems } = props;

package/dist/tree/DefaultTreeItemRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/DefaultTreeItemRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { TreeItem } from \"./TreeItem.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n} from \"./types.js\";\n\n/**\n * **Client Component**\n *\n * A reasonable default for rendering tree items that will extract all the\n * `ListItemChildrenProps` from the item and attempt to pass them into the\n * `TreeItem`.\n *\n * Look at the `Tree` component for an example of creating a custom\n * implementation.\n *\n * @since 6.0.0\n */\nexport function DefaultTreeItemRenderer<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(props: TreeItemRendererProps<T>): ReactElement {\n  const { parents, children: childItems } = props;\n  const item = props.item as DefaultTreeItemNode;\n\n  const {\n    itemId,\n    to,\n    href,\n    disabled,\n    className,\n    contentClassName,\n    leftAddon,\n    leftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n  } = item;\n  const children = item.name ?? item.children;\n\n  return (\n    <TreeItem\n      to={to}\n      href={href}\n      depth={parents.length}\n      childItems={childItems}\n      className={className}\n      contentClassName={contentClassName}\n      itemId={itemId}\n      disabled={disabled}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonClassName={leftAddonClassName}\n      leftAddonForceWrap={leftAddonForceWrap}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonClassName={rightAddonClassName}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </TreeItem>\n  );\n}\n"],"names":["TreeItem","DefaultTreeItemRenderer","props","parents","children","childItems","item","itemId","to","href","disabled","className","contentClassName","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","name","depth","length"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAOzC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,wBAEdC,KAA+B;IAC/B,MAAM,EAAEC,OAAO,EAAEC,UAAUC,UAAU,EAAE,GAAGH;IAC1C,MAAMI,OAAOJ,MAAMI,IAAI;IAEvB,MAAM,EACJC,MAAM,EACNC,EAAE,EACFC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,6BAA6B,EAC7BC,8BAA8B,EAC/B,GAAGlB;IACJ,MAAMF,WAAWE,KAAKmB,IAAI,IAAInB,KAAKF,QAAQ;IAE3C,qBACE,KAACJ;QACCQ,IAAIA;QACJC,MAAMA;QACNiB,OAAOvB,QAAQwB,MAAM;QACrBtB,YAAYA;QACZM,WAAWA;QACXC,kBAAkBA;QAClBL,QAAQA;QACRG,UAAUA;QACVG,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,oBAAoBA;QACpBC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,qBAAqBA;QACrBC,+BAA+BA;QAC/BC,gCAAgCA;kBAE/BpB;;AAGP"}
+{"version":3,"sources":["../../src/tree/DefaultTreeItemRenderer.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { TreeItem } from \"./TreeItem.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeItemNode,\n  type TreeItemRendererProps,\n} from \"./types.js\";\n\n/**\n * **Client Component**\n *\n * A reasonable default for rendering tree items that will extract all the\n * `ListItemChildrenProps` from the item and attempt to pass them into the\n * `TreeItem`.\n *\n * Look at the `Tree` component for an example of creating a custom\n * implementation.\n *\n * @see {@link https://next.react-md.dev/components/tree | Tree Demos}\n * @since 6.0.0\n */\nexport function DefaultTreeItemRenderer<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>(props: TreeItemRendererProps<T>): ReactElement {\n  const { parents, children: childItems } = props;\n  const item = props.item as DefaultTreeItemNode;\n\n  const {\n    itemId,\n    to,\n    href,\n    disabled,\n    className,\n    contentClassName,\n    leftAddon,\n    leftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n  } = item;\n  const children = item.name ?? item.children;\n\n  return (\n    <TreeItem\n      to={to}\n      href={href}\n      depth={parents.length}\n      childItems={childItems}\n      className={className}\n      contentClassName={contentClassName}\n      itemId={itemId}\n      disabled={disabled}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonClassName={leftAddonClassName}\n      leftAddonForceWrap={leftAddonForceWrap}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonClassName={rightAddonClassName}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </TreeItem>\n  );\n}\n"],"names":["TreeItem","DefaultTreeItemRenderer","props","parents","children","childItems","item","itemId","to","href","disabled","className","contentClassName","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","name","depth","length"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAOzC;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,wBAEdC,KAA+B;IAC/B,MAAM,EAAEC,OAAO,EAAEC,UAAUC,UAAU,EAAE,GAAGH;IAC1C,MAAMI,OAAOJ,MAAMI,IAAI;IAEvB,MAAM,EACJC,MAAM,EACNC,EAAE,EACFC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,6BAA6B,EAC7BC,8BAA8B,EAC/B,GAAGlB;IACJ,MAAMF,WAAWE,KAAKmB,IAAI,IAAInB,KAAKF,QAAQ;IAE3C,qBACE,KAACJ;QACCQ,IAAIA;QACJC,MAAMA;QACNiB,OAAOvB,QAAQwB,MAAM;QACrBtB,YAAYA;QACZM,WAAWA;QACXC,kBAAkBA;QAClBL,QAAQA;QACRG,UAAUA;QACVG,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,oBAAoBA;QACpBC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,qBAAqBA;QACrBC,+BAA+BA;QAC/BC,gCAAgCA;kBAE/BpB;;AAGP"}