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

package/dist/transition/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\n\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionActions {\n  /**\n   * Boolean if the transition should occur immediately once the component\n   * mounts if the {@link TransitionOptions.transitionIn} is `true`\n   *\n   * @defaultValue `false`\n   */\n  appear?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `true` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  enter?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `false` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n  [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @see {@link TransitionTimeout}\n * @remarks \\@since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionStage =\n  | \"enter\"\n  | \"entering\"\n  | \"entered\"\n  | \"exit\"\n  | \"exiting\"\n  | \"exited\";\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @remarks \\@since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * THis function is called at each `\"exit\"` {@link TransitionStage}. If a {@link\n * TransitionOptions.nodeRef} was provided, the DOM node should be available in\n * `nodeRef.current` by this point if the transition requires DOM calculations.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionCallbacks {\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEnter?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntering?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entering\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntered?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entered\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onExit?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exiting\"`.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExiting?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exited\"`.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExited?: TransitionExitHandler;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends TransitionActions,\n    TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link TransitionHookReturnValue.ref}\n   */\n  nodeRef?: Ref<E>;\n\n  /**\n   * Boolean if the element should mount and unmount based on the\n   * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n   *\n   * @defaultValue `false`\n   */\n  temporary?: boolean;\n\n  /**\n   * This boolean controls the transition by activating flowing through the\n   * {@link TransitionStage}.\n   *\n   * @see {@link TransitionActions} for a description around the transitions.\n   */\n  transitionIn?: boolean;\n\n  /** {@inheritDoc TransitionTimeout} */\n  timeout?: TransitionTimeout;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionOptions<E> {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example\n * Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n *   appear: true,\n *   enter: true,\n *   exit: true,\n *   timeout: 300,\n *   classNames: {\n *     appear: \"appear\",\n *     appearEnter: \"appear--enter\",\n *     appearDone: \"appear--done appear--complete\",\n *     enter: \"enter\",\n *     enterEnter: \"\",\n *     enterDone: \"enter--done enter--complete\",\n *     exit: \"\",\n *     exitEnter: \"\",\n *     exitDone: \"exit--done exit--complete\",\n *   }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appear?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enter?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exit?: string;\n\n  /**\n   * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitDone?: string;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport type CSSTransitionClassNames =\n  | string\n  | Readonly<CSSTransitionClassNamesObject>;\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /**\n   * An optional className to be merged with the transition classes.\n   */\n  className?: string;\n\n  /**\n   * When this is `true` and the {@link temporary} option is `false`, the\n   * element will gain a class name to hide it with `display: none` instead of\n   * conditionally rendering the element.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0\n   */\n  exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookOptions<E extends HTMLElement>\n  extends TransitionOptions<E> {\n  /**\n   * Boolean if the DOM should forcefully be reflow each time a transition\n   * change occurs. This is generally required for any CSS transition and is\n   * set to `true` for the {@link useCSSTransition} hook.\n   *\n   * @defaultValue `false`\n   */\n  reflow?: boolean;\n\n  /**\n   * @remarks \\@since 6.0.0\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionState {\n  /** {@inheritDoc TransitionStage} */\n  stage: TransitionStage;\n\n  /**\n   * Boolean if the element should be rendered or not. This will always be\n   * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n   * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n   */\n  rendered: boolean;\n\n  /**\n   * Boolean if this is the first {@link TransitionActions.appear} transition.\n   * This will be `true` during the first transition if\n   * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n   * `false`.\n   */\n  appearing: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface TransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionState {\n  /**\n   * A ref that is required for the transition to occur and should be passed to\n   * the element affected by the transition.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * A function that can be used to specifically set the transition to a\n   * specific stage. This shouldn't really be used too much and is really just\n   * useful for \"appear only transitions\" that do not unmount the child\n   * elements.\n   *\n   * @example\n   * Simple Example\n   * ```tsx\n   * import { ReactElement, useEffect, useRef } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   * import { useRouter } from \"react-router-dom\";\n   *\n   * function Example(): ReactElement {\n   *   const { pathname } = useRouter();\n   *   const { elementProps, transitionTo } = useCSSTransition({\n   *     transitionIn: true,\n   *     timeout: 1000,\n   *     classNames: \"some-enter-transition\",\n   *   });\n   *\n   *   useEffect(() => {\n   *     // Do not trigger transition on first load.\n   *     if (prevPathname.current === pathname) {\n   *       return;\n   *     }\n   *\n   *     prevPathname.current = pathname;\n   *     transitionTo(\"enter\");\n   *   }, [pathname, transitionTo]);\n   *\n   *   return <div {...elementProps}>{content}</div>;\n   * }\n   * ```\n   *\n   * @param stage - The {@link TransitionStage} to set to\n   */\n  transitionTo(stage: TransitionStage): void;\n\n  /**\n   * This is mostly used internally to make it so that you can render portalled\n   * elements inline with content if SSR is enabled in your app. To enable this\n   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n   *\n   * This value will be `true` if a portalled element was rendered by default\n   * from the server and remain true until it unmounts from the DOM.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0\n   */\n  disablePortal: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E> {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n  /** {@inheritDoc CSSTransitionClassNames} */\n  classNames: CSSTransitionClassNames;\n\n  /**\n   * @remarks \\@since 6.0.0\n   */\n  disablePortal?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionElementProps<E extends HTMLElement> {\n  /** @see {@link TransitionHookReturnValue.ref} */\n  ref: RefCallback<E>;\n\n  /**\n   * The current transition class name or `undefined`.\n   */\n  className: string | undefined;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionHookReturnValue<E>,\n    CSSTransitionElementProps<E> {\n  /**\n   * This can be used so that you don't need to destructure multiple props from\n   * the hook return value to pass to the transitioning component.\n   *\n   * @example\n   * Simple Example\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { elementProps, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div {...elementProps}>{children}</div>\n   * }\n   * ```\n   *\n   * @example\n   * Verbose Version\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { ref, className, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div ref={ref} className={className}>{children}</div>\n   * }\n   * ```\n   */\n  elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n  /** @see {@link CSSTransitionHookOptions.temporary} */\n  temporary?: boolean;\n  /** @see {@link TransitionTimeout} */\n  timeout?: TransitionTimeout;\n  /** @see {@link CSSTransitionClassNames} */\n  classNames?: CSSTransitionClassNames;\n  /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n  exitedHidden?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CSSTransitionComponentImplementation<E extends HTMLElement> {\n  /**\n   * The child element that should have a `ref` and `className` cloned into\n   * using the `cloneElement` API. If the child is a custom component, you\n   * **must** use `React.forwardRef` and pass both of these to a DOM element for\n   * the transition to work.\n   */\n  children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAslBR;;;;CAIC,GACD,WAQC"}
+{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionActions {\n  /**\n   * Boolean if the transition should occur immediately once the component\n   * mounts if the {@link TransitionOptions.transitionIn} is `true`\n   *\n   * @defaultValue `false`\n   */\n  appear?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `true` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  enter?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `false` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n  [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * @since 6.0.0\n */\nexport type TransitionEnterStage = \"enter\" | \"entering\" | \"entered\";\n\n/**\n * @since 6.0.0\n */\nexport type TransitionExitStage = \"exit\" | \"exiting\" | \"exited\";\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @since 4.0.0\n * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`\n */\nexport type TransitionStage = TransitionEnterStage | TransitionExitStage;\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * This function is called at each `\"exit\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionCallbacks {\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEnter?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntering?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entering\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntered?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entered\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onExit?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exiting\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExiting?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exited\"`.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExited?: TransitionExitHandler;\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 PreconfiguredTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends TransitionActions,\n    TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link TransitionHookReturnValue.ref}\n   */\n  nodeRef?: Ref<E>;\n\n  /**\n   * Boolean if the element should mount and unmount based on the\n   * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n   *\n   * @defaultValue `false`\n   */\n  temporary?: boolean;\n\n  /**\n   * This boolean controls the transition by activating flowing through the\n   * {@link TransitionStage}.\n   *\n   * @see {@link TransitionActions} for a description around the transitions.\n   */\n  transitionIn?: boolean;\n\n  /** {@inheritDoc TransitionTimeout} */\n  timeout?: TransitionTimeout;\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 PreconfiguredTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\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 TransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionOptions<E> {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n *   appear: true,\n *   enter: true,\n *   exit: true,\n *   timeout: 300,\n *   classNames: {\n *     appear: \"appear\",\n *     appearEnter: \"appear--enter\",\n *     appearDone: \"appear--done appear--complete\",\n *     enter: \"enter\",\n *     enterEnter: \"\",\n *     enterDone: \"enter--done enter--complete\",\n *     exit: \"\",\n *     exitEnter: \"\",\n *     exitDone: \"exit--done exit--complete\",\n *   }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appear?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enter?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exit?: string;\n\n  /**\n   * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitDone?: string;\n}\n\n/**\n * @since 4.0.0\n */\nexport type CSSTransitionClassNames =\n  | string\n  | Readonly<CSSTransitionClassNamesObject>;\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 PreconfiguredCSSTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /**\n   * An optional className to be merged with the transition classes.\n   */\n  className?: string;\n\n  /**\n   * When this is `true` and the {@link temporary} option is `false`, the\n   * element will gain a class name to hide it with `display: none` instead of\n   * conditionally rendering the element.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  exitedHidden?: boolean;\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 PreconfiguredCSSTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SSRTransitionOptions {\n  /**\n   * This is mostly used internally to make it so that you can render portalled\n   * elements inline with content if SSR is enabled in your app. To enable this\n   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n   *\n   * This value will be `true` if a portalled element was rendered by default\n   * from the server and remain true until it unmounts from the DOM.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\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 TransitionHookOptions<E extends HTMLElement>\n  extends TransitionOptions<E>,\n    SSRTransitionOptions {\n  /**\n   * Boolean if the DOM should forcefully be reflow each time a transition\n   * change occurs. This is generally required for any CSS transition and is\n   * set to `true` for the {@link useCSSTransition} hook.\n   *\n   * @defaultValue `false`\n   */\n  reflow?: boolean;\n}\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionState {\n  /** {@inheritDoc TransitionStage} */\n  stage: TransitionStage;\n\n  /**\n   * Boolean if the element should be rendered or not. This will always be\n   * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n   * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n   */\n  rendered: boolean;\n\n  /**\n   * Boolean if this is the first {@link TransitionActions.appear} transition.\n   * This will be `true` during the first transition if\n   * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n   * `false`.\n   */\n  appearing: boolean;\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 TransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionState,\n    Required<SSRTransitionOptions> {\n  /**\n   * A ref that is required for the transition to occur and should be passed to\n   * the element affected by the transition.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * A function that can be used to specifically set the transition to a\n   * specific stage. This shouldn't really be used too much and is really just\n   * useful for \"appear only transitions\" that do not unmount the child\n   * elements.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import { ReactElement, useEffect, useRef } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   * import { useRouter } from \"react-router-dom\";\n   *\n   * function Example(): ReactElement {\n   *   const { pathname } = useRouter();\n   *   const { elementProps, transitionTo } = useCSSTransition({\n   *     transitionIn: true,\n   *     timeout: 1000,\n   *     classNames: \"some-enter-transition\",\n   *   });\n   *\n   *   useEffect(() => {\n   *     // Do not trigger transition on first load.\n   *     if (prevPathname.current === pathname) {\n   *       return;\n   *     }\n   *\n   *     prevPathname.current = pathname;\n   *     transitionTo(\"enter\");\n   *   }, [pathname, transitionTo]);\n   *\n   *   return <div {...elementProps}>{content}</div>;\n   * }\n   * ```\n   *\n   * @param stage - The {@link TransitionStage} to set to\n   */\n  transitionTo: (stage: TransitionStage) => void;\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 CSSTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E>,\n    SSRTransitionOptions {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n  /** {@inheritDoc CSSTransitionClassNames} */\n  classNames: CSSTransitionClassNames;\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 CSSTransitionElementProps<E extends HTMLElement> {\n  /** @see {@link TransitionHookReturnValue.ref} */\n  ref: RefCallback<E>;\n\n  /**\n   * The current transition class name or `undefined`.\n   */\n  className: string | undefined;\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 CSSTransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionHookReturnValue<E>,\n    CSSTransitionElementProps<E> {\n  /**\n   * This can be used so that you don't need to destructure multiple props from\n   * the hook return value to pass to the transitioning component.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { elementProps, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div {...elementProps}>{children}</div>\n   * }\n   * ```\n   *\n   * @example Verbose Version\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { ref, className, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div ref={ref} className={className}>{children}</div>\n   * }\n   * ```\n   */\n  elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n  /** @see {@link CSSTransitionHookOptions.temporary} */\n  temporary?: boolean;\n  /** @see {@link TransitionTimeout} */\n  timeout?: TransitionTimeout;\n  /** @see {@link CSSTransitionClassNames} */\n  classNames?: CSSTransitionClassNames;\n  /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n  exitedHidden?: boolean;\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 CSSTransitionComponentImplementation<E extends HTMLElement> {\n  /**\n   * The child element that should have a `ref` and `className` cloned into\n   * using the `cloneElement` API. If the child is a custom component, you\n   * **must** use `React.forwardRef` and pass both of these to a DOM element for\n   * the transition to work.\n   */\n  children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAkmBR;;;;CAIC,GACD,WAQC"}

package/dist/transition/useCSSTransition.d.ts

@@ -3,11 +3,12 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * This hook is used to create CSS transitions for different components whenever
  * a {@link TransitionHookOptions.transitionIn} flag is changed.
  *
- * @example
- * Simple Transition
+ * @example Simple Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -54,11 +55,12 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
- * @example
- * Visibility Transition
+ * @example Visibility Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -111,8 +113,7 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
- * @example
- * Mount Transition
+ * @example Mount Transition
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useCSSTransition } from "@react-md/transition";
@@ -140,8 +141,10 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useCSSTransition<E extends HTMLElement>(options: CSSTransitionHookOptions<E>): CSSTransitionHookReturnValue<E>;

package/dist/transition/useCSSTransition.js

@@ -7,11 +7,12 @@ import { getTransitionClassNames } from "./utils.js";
  * This hook is used to create CSS transitions for different components whenever
  * a {@link TransitionHookOptions.transitionIn} flag is changed.
  *
- * @example
- * Simple Transition
+ * @example Simple Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -58,11 +59,12 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
- * @example
- * Visibility Transition
+ * @example Visibility Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -115,8 +117,7 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
- * @example
- * Mount Transition
+ * @example Mount Transition
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useCSSTransition } from "@react-md/transition";
@@ -144,9 +145,11 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export function useCSSTransition(options) {
     const { className, classNames, appear = false, enter = true, exit = true, timeout, temporary = false, exitedHidden = false, ...transitionOptions } = options;
     const { ref, stage, rendered, appearing, transitionTo, disablePortal } = useTransition({

package/dist/transition/useCSSTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCSSTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookOptions,\n  CSSTransitionHookReturnValue,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  TransitionHookOptions,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getTransitionClassNames } from \"./utils.js\";\n\n/**\n * This hook is used to create CSS transitions for different components whenever\n * a {@link TransitionHookOptions.transitionIn} flag is changed.\n *\n * @example\n * Simple Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0.5;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0.5;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps } = useCSSTransition({\n *     timeout: 150,\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <Typography {...elementProps}>\n *         Some Opacity Changing Text\n *       </Typography>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Visibility Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0;\n * //   transition: opacity .2s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps, rendered } = useCSSTransition({\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *     temporary: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <Typography {...elementProps}>\n *           Some Opacity Changing Text\n *         </Typography>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Mount Transition\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * // Pretend styles\n * // .opacity {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--active {\n * //   opacity: 1;\n * // }\n * //\n *\n * function Example(): ReactElement {\n *   const { elementProps } = useCSSTransition({\n *     appear: true,\n *     transitionIn: true,\n *     timeout: 300,\n *     classNames: \"opacity\",\n *   })\n *\n *   return <div {...elementProps}>Some Content!</div>;\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useCSSTransition<E extends HTMLElement>(\n  options: CSSTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    className,\n    classNames,\n    appear = false,\n    enter = true,\n    exit = true,\n    timeout,\n    temporary = false,\n    exitedHidden = false,\n    ...transitionOptions\n  } = options;\n\n  const { ref, stage, rendered, appearing, transitionTo, disablePortal } =\n    useTransition({\n      ...transitionOptions,\n      appear,\n      enter,\n      exit,\n      timeout,\n      reflow: true,\n      temporary,\n    });\n  const isEntering = stage === \"entering\";\n  const isEnter = isEntering || stage === \"enter\";\n  const isEntered = stage === \"entered\";\n  const isExiting = stage === \"exiting\";\n  const isExit = isExiting || stage === \"exit\";\n  const isExited = stage === \"exited\";\n  const transitionClassNames = getTransitionClassNames({\n    timeout,\n    appear,\n    enter,\n    exit,\n    classNames,\n  });\n\n  const elementProps: CSSTransitionElementProps<E> = {\n    ref,\n    className:\n      cnb(\n        // always apply the provided className first since it makes snapshot\n        // tests easier to parse if dynamic classes come afterwards\n        className,\n        !temporary && exitedHidden && stage === \"exited\" && DISPLAY_NONE_CLASS,\n        appearing && isEnter && transitionClassNames.appear,\n        appearing && isEntering && transitionClassNames.appearActive,\n        appearing && isEntered && transitionClassNames.appearDone,\n        !appearing && isEnter && transitionClassNames.enter,\n        !appearing && isEntering && transitionClassNames.enterActive,\n        !appearing && isEntered && transitionClassNames.enterDone,\n        isExit && transitionClassNames.exit,\n        isExiting && transitionClassNames.exitActive,\n        isExited && transitionClassNames.exitDone\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","DISPLAY_NONE_CLASS","useTransition","getTransitionClassNames","useCSSTransition","options","className","classNames","appear","enter","exit","timeout","temporary","exitedHidden","transitionOptions","ref","stage","rendered","appearing","transitionTo","disablePortal","reflow","isEntering","isEnter","isEntered","isExiting","isExit","isExited","transitionClassNames","elementProps","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone","undefined"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,kBAAkB,QAAQ,+BAA+B;AAQlE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,QAAQ,aAAa;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJC,GACD,OAAO,SAASC,iBACdC,OAAoC;IAEpC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,OAAO,EACPC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpB,GAAGC,mBACJ,GAAGT;IAEJ,MAAM,EAAEU,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpElB,cAAc;QACZ,GAAGY,iBAAiB;QACpBN;QACAC;QACAC;QACAC;QACAU,QAAQ;QACRT;IACF;IACF,MAAMU,aAAaN,UAAU;IAC7B,MAAMO,UAAUD,cAAcN,UAAU;IACxC,MAAMQ,YAAYR,UAAU;IAC5B,MAAMS,YAAYT,UAAU;IAC5B,MAAMU,SAASD,aAAaT,UAAU;IACtC,MAAMW,WAAWX,UAAU;IAC3B,MAAMY,uBAAuBzB,wBAAwB;QACnDQ;QACAH;QACAC;QACAC;QACAH;IACF;IAEA,MAAMsB,eAA6C;QACjDd;QACAT,WACEN,IACE,oEAAoE;QACpE,2DAA2D;QAC3DM,WACA,CAACM,aAAaC,gBAAgBG,UAAU,YAAYf,oBACpDiB,aAAaK,WAAWK,qBAAqBpB,MAAM,EACnDU,aAAaI,cAAcM,qBAAqBE,YAAY,EAC5DZ,aAAaM,aAAaI,qBAAqBG,UAAU,EACzD,CAACb,aAAaK,WAAWK,qBAAqBnB,KAAK,EACnD,CAACS,aAAaI,cAAcM,qBAAqBI,WAAW,EAC5D,CAACd,aAAaM,aAAaI,qBAAqBK,SAAS,EACzDP,UAAUE,qBAAqBlB,IAAI,EACnCe,aAAaG,qBAAqBM,UAAU,EAC5CP,YAAYC,qBAAqBO,QAAQ,KACtCC;IACT;IAEA,OAAO;QACL,GAAGP,YAAY;QACfb;QACAC;QACAC;QACAW;QACAV;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCSSTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookOptions,\n  CSSTransitionHookReturnValue,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  TransitionHookOptions,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getTransitionClassNames } from \"./utils.js\";\n\n/**\n * This hook is used to create CSS transitions for different components whenever\n * a {@link TransitionHookOptions.transitionIn} flag is changed.\n *\n * @example Simple Transition\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0.5;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0.5;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps } = useCSSTransition({\n *     timeout: 150,\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <Typography {...elementProps}>\n *         Some Opacity Changing Text\n *       </Typography>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Visibility Transition\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0;\n * //   transition: opacity .2s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps, rendered } = useCSSTransition({\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *     temporary: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <Typography {...elementProps}>\n *           Some Opacity Changing Text\n *         </Typography>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example Mount Transition\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * // Pretend styles\n * // .opacity {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--active {\n * //   opacity: 1;\n * // }\n * //\n *\n * function Example(): ReactElement {\n *   const { elementProps } = useCSSTransition({\n *     appear: true,\n *     transitionIn: true,\n *     timeout: 300,\n *     classNames: \"opacity\",\n *   })\n *\n *   return <div {...elementProps}>Some Content!</div>;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}\n * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCSSTransition<E extends HTMLElement>(\n  options: CSSTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    className,\n    classNames,\n    appear = false,\n    enter = true,\n    exit = true,\n    timeout,\n    temporary = false,\n    exitedHidden = false,\n    ...transitionOptions\n  } = options;\n\n  const { ref, stage, rendered, appearing, transitionTo, disablePortal } =\n    useTransition({\n      ...transitionOptions,\n      appear,\n      enter,\n      exit,\n      timeout,\n      reflow: true,\n      temporary,\n    });\n  const isEntering = stage === \"entering\";\n  const isEnter = isEntering || stage === \"enter\";\n  const isEntered = stage === \"entered\";\n  const isExiting = stage === \"exiting\";\n  const isExit = isExiting || stage === \"exit\";\n  const isExited = stage === \"exited\";\n  const transitionClassNames = getTransitionClassNames({\n    timeout,\n    appear,\n    enter,\n    exit,\n    classNames,\n  });\n\n  const elementProps: CSSTransitionElementProps<E> = {\n    ref,\n    className:\n      cnb(\n        // always apply the provided className first since it makes snapshot\n        // tests easier to parse if dynamic classes come afterwards\n        className,\n        !temporary && exitedHidden && stage === \"exited\" && DISPLAY_NONE_CLASS,\n        appearing && isEnter && transitionClassNames.appear,\n        appearing && isEntering && transitionClassNames.appearActive,\n        appearing && isEntered && transitionClassNames.appearDone,\n        !appearing && isEnter && transitionClassNames.enter,\n        !appearing && isEntering && transitionClassNames.enterActive,\n        !appearing && isEntered && transitionClassNames.enterDone,\n        isExit && transitionClassNames.exit,\n        isExiting && transitionClassNames.exitActive,\n        isExited && transitionClassNames.exitDone\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","DISPLAY_NONE_CLASS","useTransition","getTransitionClassNames","useCSSTransition","options","className","classNames","appear","enter","exit","timeout","temporary","exitedHidden","transitionOptions","ref","stage","rendered","appearing","transitionTo","disablePortal","reflow","isEntering","isEnter","isEntered","isExiting","isExit","isExited","transitionClassNames","elementProps","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone","undefined"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,kBAAkB,QAAQ,+BAA+B;AAQlE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,QAAQ,aAAa;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJC,GACD,OAAO,SAASC,iBACdC,OAAoC;IAEpC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,OAAO,EACPC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpB,GAAGC,mBACJ,GAAGT;IAEJ,MAAM,EAAEU,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpElB,cAAc;QACZ,GAAGY,iBAAiB;QACpBN;QACAC;QACAC;QACAC;QACAU,QAAQ;QACRT;IACF;IACF,MAAMU,aAAaN,UAAU;IAC7B,MAAMO,UAAUD,cAAcN,UAAU;IACxC,MAAMQ,YAAYR,UAAU;IAC5B,MAAMS,YAAYT,UAAU;IAC5B,MAAMU,SAASD,aAAaT,UAAU;IACtC,MAAMW,WAAWX,UAAU;IAC3B,MAAMY,uBAAuBzB,wBAAwB;QACnDQ;QACAH;QACAC;QACAC;QACAH;IACF;IAEA,MAAMsB,eAA6C;QACjDd;QACAT,WACEN,IACE,oEAAoE;QACpE,2DAA2D;QAC3DM,WACA,CAACM,aAAaC,gBAAgBG,UAAU,YAAYf,oBACpDiB,aAAaK,WAAWK,qBAAqBpB,MAAM,EACnDU,aAAaI,cAAcM,qBAAqBE,YAAY,EAC5DZ,aAAaM,aAAaI,qBAAqBG,UAAU,EACzD,CAACb,aAAaK,WAAWK,qBAAqBnB,KAAK,EACnD,CAACS,aAAaI,cAAcM,qBAAqBI,WAAW,EAC5D,CAACd,aAAaM,aAAaI,qBAAqBK,SAAS,EACzDP,UAAUE,qBAAqBlB,IAAI,EACnCe,aAAaG,qBAAqBM,UAAU,EAC5CP,YAAYC,qBAAqBO,QAAQ,KACtCC;IACT;IAEA,OAAO;QACL,GAAGP,YAAY;QACfb;QACAC;QACAC;QACAW;QACAV;QACAC;IACF;AACF"}

package/dist/transition/useCarousel.d.ts

@@ -1,26 +1,26 @@
 import type { UseStateSetter } from "../types.js";
 import type { SlideDirection } from "./SlideContainer.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CarouselSlideState {
     direction: SlideDirection;
     activeIndex: number;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CarouselState extends CarouselSlideState {
     paused: boolean;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CarouselImplementation extends CarouselState {
     /**
      * Increments the carousel slide active index by 1 ensuring it does not
      * advance past the {@link CarouselOptions.totalSlides} index.
      */
-    increment(): void;
+    increment: () => void;
     /**
      * Decrements the carousel slide active index by 1 and prevents decrementing
      * past 0.
      */
-    decrement(): void;
+    decrement: () => void;
     /**
      * This can be used to manually control the {@link paused} state.
      */
@@ -28,7 +28,7 @@ export interface CarouselImplementation extends CarouselState {
     /**
      * Toggles the {@link paused} state.
      */
-    togglePaused(): void;
+    togglePaused: () => void;
     /**
      * A convenience wrapper for the {@link setCarouselSlideState} that will
      * ensure the {@link CarouselSlideState.direction} is correct based on the
@@ -42,7 +42,7 @@ export interface CarouselImplementation extends CarouselState {
     setCarouselSlideState: UseStateSetter<CarouselSlideState>;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface CarouselOptions {
     /**
@@ -59,10 +59,12 @@ export interface CarouselOptions {
     totalSlides: number;
 }
 /**
- * @example
- * Accessible Carousel Example
+ * @example Accessible Carousel Example
  * ```tsx
- * import { Button, SlideContainer, Slide, useCarousel } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Slide } from "@react-md/core/transition/Slide";
+ * import { SlideContainer } from "@react-md/core/transition/SlideContainer";
+ * import { useCarousel } from "@react-md/core/transition/useCarousel";
  * import ChevronLeftIcon from "@react-md/material-icons/ChevronLeftIcon";
  * import ChevronRightIcon from "@react-md/material-icons/ChevronRightIcon";
  * import PauseIcon from "@react-md/material-icons/PauseIcon";
@@ -151,8 +153,9 @@ export interface CarouselOptions {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/carousel | Carousel Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}
+ * @since 6.0.0
  */
 export declare function useCarousel(options: CarouselOptions): CarouselImplementation;

package/dist/transition/useCarousel.js

@@ -3,10 +3,12 @@ import { useCallback, useEffect, useState } from "react";
 import { useToggle } from "../useToggle.js";
 import { loop } from "../utils/loop.js";
 /**
- * @example
- * Accessible Carousel Example
+ * @example Accessible Carousel Example
  * ```tsx
- * import { Button, SlideContainer, Slide, useCarousel } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Slide } from "@react-md/core/transition/Slide";
+ * import { SlideContainer } from "@react-md/core/transition/SlideContainer";
+ * import { useCarousel } from "@react-md/core/transition/useCarousel";
  * import ChevronLeftIcon from "@react-md/material-icons/ChevronLeftIcon";
  * import ChevronRightIcon from "@react-md/material-icons/ChevronRightIcon";
  * import PauseIcon from "@react-md/material-icons/PauseIcon";
@@ -95,14 +97,15 @@ import { loop } from "../utils/loop.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/carousel | Carousel Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}
+ * @since 6.0.0
  */ export function useCarousel(options) {
     const { duration = 8000, totalSlides } = options;
     const total = totalSlides - 1;
     const [state, setCarouselSlideState] = useState({
-        direction: "left",
+        direction: "forward",
         activeIndex: 0
     });
     const { toggled: paused, toggle: togglePaused, setToggled: setPaused } = useToggle(false);
@@ -111,14 +114,14 @@ import { loop } from "../utils/loop.js";
             const prevActiveIndex = prevState.activeIndex;
             const nextActiveIndex = typeof activeIndexOrGetter === "function" ? activeIndexOrGetter(prevActiveIndex) : activeIndexOrGetter;
             return {
-                direction: prevActiveIndex < nextActiveIndex ? "left" : "right",
+                direction: prevActiveIndex < nextActiveIndex ? "forward" : "backward",
                 activeIndex: nextActiveIndex
             };
         });
     }, []);
     const increment = useCallback(()=>{
         setCarouselSlideState((prevState)=>({
-                direction: "left",
+                direction: "forward",
                 activeIndex: Math.min(total, prevState.activeIndex + 1)
             }));
     }, [
@@ -126,7 +129,7 @@ import { loop } from "../utils/loop.js";
     ]);
     const decrement = useCallback(()=>{
         setCarouselSlideState((prevState)=>({
-                direction: "right",
+                direction: "backward",
                 activeIndex: Math.max(0, prevState.activeIndex - 1)
             }));
     }, []);
@@ -143,7 +146,7 @@ import { loop } from "../utils/loop.js";
                 increment: true
             });
             setCarouselSlideState({
-                direction: activeIndex < nextActiveIndex ? "left" : "right",
+                direction: activeIndex < nextActiveIndex ? "forward" : "backward",
                 activeIndex: nextActiveIndex
             });
         }, duration);

package/dist/transition/useCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCarousel.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\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/** @remarks \\@since 6.0.0 */\nexport interface CarouselSlideState {\n  direction: SlideDirection;\n  activeIndex: number;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CarouselState extends CarouselSlideState {\n  paused: boolean;\n}\n\n/** @remarks \\@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 * @remarks \\@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\n * Accessible Carousel Example\n * ```tsx\n * import { Button, SlideContainer, Slide, useCarousel } from \"@react-md/core\";\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 * @remarks \\@since 6.0.0\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 */\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: \"left\",\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 ? \"left\" : \"right\",\n          activeIndex: nextActiveIndex,\n        };\n      });\n    },\n    []\n  );\n  const increment = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"left\",\n      activeIndex: Math.min(total, prevState.activeIndex + 1),\n    }));\n  }, [total]);\n  const decrement = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"right\",\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 ? \"left\" : \"right\",\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;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEzD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AAuExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGC,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,SAAS;gBACxDX,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,SAAS;gBACpDX,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://next.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/useCollapseTransition.d.ts

@@ -1,23 +1,14 @@
-import type { CSSProperties } from "react";
-import type { CSSTransitionElementProps, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout, TransitionTimeoutObject } from "./types.js";
+import { type CSSProperties } from "react";
+import { type CSSTransitionElementProps, type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions, type TransitionTimeout } from "./types.js";
 /**
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */
-export declare const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
+export declare const DEFAULT_COLLAPSE_TIMEOUT: {
+    readonly enter: 250;
+    readonly exit: 200;
+};
 /**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_TIMEOUT: Readonly<TransitionTimeoutObject>;
-/**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseConfigurationStyle {
     /**
@@ -32,8 +23,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`
+     * @defaultValue `0`
      */
     minHeight?: number | string;
     /**
@@ -45,8 +35,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`
+     * @defaultValue `0`
      */
     minPaddingTop?: number | string;
     /**
@@ -58,13 +47,12 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`
+     * @defaultValue `0`
      */
     minPaddingBottom?: number | string;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseStyle extends CollapseConfigurationStyle {
     /**
@@ -79,7 +67,7 @@ export interface CollapseStyle extends CollapseConfigurationStyle {
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseElementProps<E extends HTMLElement> extends CSSTransitionElementProps<E> {
     /**
@@ -93,7 +81,7 @@ export interface CollapseElementProps<E extends HTMLElement> extends CSSTransiti
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseTransitionHookOptions<E extends HTMLElement> extends Omit<PreconfiguredCSSTransitionOptions<E>, "exitedHidden">, CollapseConfigurationStyle {
     /**
@@ -118,15 +106,14 @@ export interface CollapseTransitionHookOptions<E extends HTMLElement> extends Om
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extends CSSTransitionHookReturnValue<E>, CollapseElementProps<E> {
     /**
      * This is just a convenience object so that you don't need to destructure as
      * many variables to pass to an element.
      *
-     * @example
-     * Simple Usage
+     * @example Simple Usage
      * ```tsx
      * const { elementProps, rendered } = useCollapseTransition({
      *   // ...options
@@ -171,11 +158,12 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this
  * work like a "See More"/"Preview" type of element
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCollapseTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const [collapsed, setCollapsed] = useState(true);
@@ -203,12 +191,14 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  * }
  * ```
  *
- * @example
- * See More Example
+ * @example See More Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, IconRotator, Typography, useCollapseTransition } from "@react-md/core";
- * import { KeyboardArrowDownSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { IconRotator } from "@react-md/core/icon/IconRotator";
+ * import KeyboardArrowDownIcon from "@react-md/material-icons/KeyboardArrowDownIcon"
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * import styles from "./Example.module.scss";
  * // pretend styles:
@@ -245,7 +235,7 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  *         className={styles.button}
  *       >
  *         <IconRotator rotated={!collapsed}>
- *           <KeyboardArrowDownSVGIcon />
+ *           <KeyboardArrowDownIcon />
  *         </IconRotator>
  *       </Button>
  *       <SomeComponentWithALotOfContent />
@@ -254,8 +244,10 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-collapse-transition | useCollapseTransition Demos}
+ * @see {@link https://next.react-md.dev/components/collapse | Collapse Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useCollapseTransition<E extends HTMLElement>(options: CollapseTransitionHookOptions<E>): CollapseTransitionHookReturnValue<E>;