@react-md/core 1.0.0-next.11 → 1.0.0-next.13

package/src/theme/useColorScheme.ts

@@ -2,14 +2,14 @@
 import { createContext, useContext } from "react";
 import type { UseStateSetter } from "../types.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type ColorScheme = "light" | "dark";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type ColorSchemeMode = ColorScheme | "system";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ColorSchemeModeBehavior {
   /**
@@ -32,7 +32,7 @@ export interface ColorSchemeModeBehavior {
   setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ColorSchemeContext extends ColorSchemeModeBehavior {
   /**
    * The current color scheme that is being used. This is only useful when the
@@ -54,8 +54,7 @@ context.displayName = "ColorScheme";
 export const { Provider: ColorSchemeProvider } = context;
 
 /**
- * @example
- * Lazy Load Configurable Themes
+ * @example Lazy Load Configurable Themes
  * ```tsx
  * import type { ChangeEvent, ReactElement } from "react";
  * import { lazy } from "react";
@@ -128,7 +127,7 @@ export const { Provider: ColorSchemeProvider } = context;
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useColorScheme(): Readonly<ColorSchemeContext> {
   return useContext(context);

package/src/theme/useColorSchemeMetaTag.ts

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { type ColorScheme } from "./useColorScheme.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ColorSchemeMetaTagOptions {
   /**
@@ -19,7 +19,7 @@ export interface ColorSchemeMetaTagOptions {
  * should not be used if you are using the `useColorSchemeProvider` since it is
  * already built in.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useColorSchemeMetaTag(
   options: ColorSchemeMetaTagOptions

package/src/theme/useColorSchemeProvider.ts

@@ -11,7 +11,7 @@ import { useColorSchemeMetaTag } from "./useColorSchemeMetaTag.js";
 import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ColorSchemeProviderOptions
   extends Partial<ColorSchemeModeBehavior> {
@@ -66,7 +66,7 @@ export interface ColorSchemeProviderOptions
  *   return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useColorSchemeProvider(
   options?: { [key in keyof ColorSchemeModeBehavior]?: never } & {

package/src/theme/usePrefersColorScheme.ts

@@ -5,7 +5,7 @@ import { useMediaQuery } from "../media-queries/useMediaQuery.js";
  * A simple wrapper around the {@link useMediaQuery} hook with:
  * `"(prefers-color-scheme: dark)"`.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function usePrefersDarkTheme(disabled = false): boolean {
   return useMediaQuery("(prefers-color-scheme: dark)", disabled);

package/src/theme/utils.ts

@@ -181,7 +181,7 @@ export function isContrastCompliant(
  * This is pretty much a javascript implementation as the `contrast-color` Sass
  * function.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function contrastColor(
   backgroundColor: string,

package/src/tooltip/Tooltip.tsx

@@ -20,9 +20,8 @@ import { tooltip } from "./tooltipStyles.js";
  * The base props for the `Tooltip` component. This can be extended when
  * creating custom tooltip implementations.
  *
- * @remarks
- * \@since 2.8.0 Supports the `RenderConditionalPortalProps`
- * \@since 6.0.0 No longer supports the `RenderConditionalPortalProps`.
+ * @since 2.8.0 Supports the `RenderConditionalPortalProps`
+ * @since 6.0.0 No longer supports the `RenderConditionalPortalProps`.
  */
 export interface TooltipProps
   extends HTMLAttributes<HTMLSpanElement>,
@@ -73,8 +72,7 @@ export interface TooltipProps
  * will need to manually add all the event listeners and triggers to change the
  * `visible` prop.
  *
- * @example
- * Simple Usage
+ * @example Simple Usage
  * ```tsx
  * import { Button, useTooltip, Tooltip } from "@react-md/core";
  *

package/src/tooltip/TooltipHoverModeProvider.tsx

@@ -13,7 +13,7 @@ import {
 } from "../hoverMode/useHoverModeProvider.js";
 import { DEFAULT_TOOLTIP_DELAY } from "./constants.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type TooltipHoverModeContext = HoverModeContext;
 
 const context = createContext<TooltipHoverModeContext>(
@@ -27,14 +27,14 @@ const { Provider } = context;
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {
   return useContext(context);
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TooltipHoverModeProviderProps
   extends Partial<HoverModeConfiguration> {
@@ -67,8 +67,7 @@ export interface TooltipHoverModeProviderProps
  * You can also use this provider to configure all tooltips' visibility delay to
  * a new value.
  *
- * @example
- * Configuration Example
+ * @example Configuration Example
  * ```tsx
  * <TooltipHoverModeProvider
  *   // wait 3 seconds before displaying any tooltips
@@ -85,7 +84,7 @@ export interface TooltipHoverModeProviderProps
  * </TooltipHoverModeProvider>
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function TooltipHoverModeProvider(
   props: TooltipHoverModeProviderProps

package/src/tooltip/constants.ts

@@ -3,7 +3,7 @@ import type {
   TransitionTimeout,
 } from "../transition/types.js";
 
-/** @remarks \@since 2.0.0 */
+/** @since 2.0.0 */
 export const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   appear: "rmd-tooltip--enter",
   appearActive: "rmd-tooltip--visible",
@@ -14,28 +14,28 @@ export const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   exitActive: "rmd-tooltip--exit-active",
 };
 
-/** @remarks \@since 2.0.0 */
+/** @since 2.0.0 */
 export const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = {
   enter: 200,
   exit: 150,
 };
 
-/** @remarks \@since 2.0.0 */
+/** @since 2.0.0 */
 export const DEFAULT_TOOLTIP_DELAY = 1000;
-/** @remarks \@since 2.0.0 */
+/** @since 2.0.0 */
 export const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
 
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export const DEFAULT_TOOLTIP_SPACING = "1.5rem";
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export const DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export const DEFAULT_TOOLTIP_MARGIN = 16;
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export const DEFAULT_TOOLTIP_POSITION = "below";
 
 /**
  * @internal
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export const TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";

package/src/tooltip/tooltipStyles.ts

@@ -6,7 +6,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-tooltip");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TooltipClassNameOptions {
   className?: string;
@@ -16,7 +16,7 @@ export interface TooltipClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tooltip(options: TooltipClassNameOptions): string {
   const { dense, position, className, textOverflow } = options;

package/src/tooltip/useTooltip.ts

@@ -47,7 +47,7 @@ const noop = (): void => {
   // do nothing
 };
 
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export interface TooltipPositioningOptions {
   style?: CSSProperties;
 
@@ -92,9 +92,8 @@ export interface TooltipPositioningOptions {
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Removed the `TooltipTouchEventHandlers` and
+ * @since 2.8.0
+ * @since 6.0.0 Removed the `TooltipTouchEventHandlers` and
  * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`
  * event.
  */
@@ -110,7 +109,7 @@ export interface TooltippedElementEventHandlers<
   onContextMenu?(event: MouseEvent<E>): void;
 }
 
-/** @remarks \@since 2.8.0 */
+/** @since 2.8.0 */
 export interface ProvidedTooltippedElementProps<E extends HTMLElement>
   extends Required<TooltippedElementEventHandlers<E>> {
   "aria-describedby": string | undefined;
@@ -118,9 +117,8 @@ export interface ProvidedTooltippedElementProps<E extends HTMLElement>
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 A major API change for the hover mode behavior and no longer
+ * @since 2.8.0
+ * @since 6.0.0 A major API change for the hover mode behavior and no longer
  * requires a `baseId`/`id` for the tooltip. Also renamed from
  * `TooltipHookOptions` to `TooltipOptions` to match other hook naming
  * conventions.
@@ -151,8 +149,7 @@ export interface TooltipOptions<
    * should be set to `true` when your component might not have a tooltip associated
    * with it.
    *
-   * @example
-   * Real World Example
+   * @example Real World Example
    * ```tsx
    * import { Button, ButtonProps, Tooltip, useTooltip  } from "@react-md/core";
    * import type { ReactElement, ReactNode } from "react";
@@ -198,7 +195,7 @@ export interface TooltipOptions<
    * ```
    *
    * @defaultValue `false`
-   * @remarks \@since 5.1.0
+   * @since 5.1.0
    */
   disabled?: boolean;
 
@@ -229,15 +226,14 @@ export interface TooltipOptions<
    * `event .currentTarget` or `overflowRef` has text overflow.
    *
    * @defaultValue `false`
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   overflowOnly?: boolean;
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`
+ * @since 2.8.0
+ * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`
  */
 export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
   extends Required<FixedPositioningTransitionCallbacks> {
@@ -250,9 +246,8 @@ export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
 }
 
 /**
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 No longer returns any properties from the hover mode provider
+ * @since 2.8.0
+ * @since 6.0.0 No longer returns any properties from the hover mode provider
  * because of the major API change to hover mode.. Also renamed from
  * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook
  * naming conventions.
@@ -275,14 +270,13 @@ export interface TooltipImplementation<
   hideTooltip(): void;
 
   /**
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   overflowRef: RefObject<HTMLElement>;
 }
 
 /**
- * @example
- * Simple Usage
+ * @example Simple Usage
  * ```tsx
  * import { Button, useTooltip, Tooltip } from "@react-md/core";
  *
@@ -300,8 +294,7 @@ export interface TooltipImplementation<
  * }
  * ```
  *
- * @example
- * Overflow-only Tooltips
+ * @example Overflow-only Tooltips
  * ```tsx
  * import {
  *   cssUtils,
@@ -361,9 +354,8 @@ export interface TooltipImplementation<
  * The tooltip will now remain visible allowing you to find it within the
  * "Inspector" tab in the dev tools.
  *
- * @remarks
- * \@since 2.8.0
- * \@since 6.0.0 Uses a separate `TooltipHoverModeProvider`.
+ * @since 2.8.0
+ * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.
  *
  * TODO: I need to fix the tooltip for click events and history changes since
  * the mouseleave event will not be correctly bubbled if hovering a child

package/src/tooltip/useTooltipPosition.ts

@@ -13,7 +13,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export interface TooltipPositionHookOptions {
   /**
@@ -50,13 +50,13 @@ export interface TooltipPositionHookOptions {
 
 /**
  * @internal
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export type UpdateTooltipPosition = (container: HTMLElement) => void;
 
 /**
  * @internal
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export type TooltipPositionHookReturnValue = [
   SimplePosition,
@@ -68,7 +68,7 @@ export type TooltipPositionHookReturnValue = [
  * within the viewport.
  *
  * @internal
- * @remarks \@since 2.8.0
+ * @since 2.8.0
  */
 export function useTooltipPosition(
   options: TooltipPositionHookOptions

package/src/transition/CSSTransition.tsx

@@ -10,7 +10,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionProps<E extends HTMLElement>
   extends CSSTransitionHookOptions<E>,
@@ -24,8 +24,7 @@ export interface CSSTransitionProps<E extends HTMLElement>
  * `React.cloneElement` to inject the `ref` and `className` into the `children`,
  * it is recommended to use the hook instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { ReactElement, useState } from "react";
  * import { Button, CSSTransition } from "@react-md/core":
@@ -75,7 +74,7 @@ export interface CSSTransitionProps<E extends HTMLElement>
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export function CSSTransition<E extends HTMLElement>(
   props: CSSTransitionProps<E>

package/src/transition/Collapse.tsx

@@ -11,9 +11,8 @@ import {
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  *
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 Updated for the new CSS Transition API.
+ * @since 2.0.0
+ * @since 4.0.0 Updated for the new CSS Transition API.
  */
 export interface CollapseProps<E extends HTMLElement>
   extends Omit<CollapseTransitionHookOptions<E>, "transitionIn"> {
@@ -41,8 +40,7 @@ export interface CollapseProps<E extends HTMLElement>
  * `React.cloneElement` to inject the `ref` and `className` into the `children`,
  * it is recommended to use the hook instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * function Example(): ReactElement {
  *   const [collapsed, setCollapsed] = useState(true);
@@ -65,9 +63,8 @@ export interface CollapseProps<E extends HTMLElement>
  * @see {@link useCollapseTransition} for additional examples
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 Updated for the new CSS Transition API.
+ * @since 2.0.0
+ * @since 4.0.0 Updated for the new CSS Transition API.
  */
 export function Collapse<E extends HTMLElement>(
   props: CollapseProps<E>

package/src/transition/CrossFade.tsx

@@ -10,9 +10,8 @@ import {
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 Updated for the new CSS Transition API
+ * @since 2.0.0
+ * @since 4.0.0 Updated for the new CSS Transition API
  */
 export interface CrossFadeProps<E extends HTMLElement>
   extends CrossFadeTransitionHookOptions<E>,
@@ -35,8 +34,7 @@ export interface CrossFadeProps<E extends HTMLElement>
  * `React.cloneElement` to inject the `ref` and `className` into the `children`,
  * it is recommended to use the hook instead.
  *
- * @example
- * Appear transitions with a React `key`
+ * @example Appear transitions with a React `key`
  * ```tsx
  * import { ReactElement, useState } from "react";
  * import { CrossFade } from "@react-md/transition";
@@ -89,9 +87,8 @@ export interface CrossFadeProps<E extends HTMLElement>
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 Updated for the new CSS Transition API and no longer supports
+ * @since 2.0.0
+ * @since 4.0.0 Updated for the new CSS Transition API and no longer supports
  * wrapping children in a `<div>`.
  */
 export function CrossFade<E extends HTMLElement>(

package/src/transition/ScaleTransition.tsx

@@ -10,10 +10,9 @@ import {
 /**
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 The typeParam was added
- * \@since 6.0.0 Removed portal props
+ * @since 2.0.0
+ * @since 4.0.0 The typeParam was added
+ * @since 6.0.0 Removed portal props
  */
 export interface ScaleTransitionProps<E extends HTMLElement>
   extends CSSTransitionComponentImplementation<E>,
@@ -27,8 +26,7 @@ export interface ScaleTransitionProps<E extends HTMLElement>
  * component uses the `React.cloneElement` to inject the `ref` and `className`
  * into the `children`, it is recommended to use the hook instead.
  *
- * @example
- * Dropdown Menu Example
+ * @example Dropdown Menu Example
  * ```tsx
  * import { ReactElement, useRef, useState } from "react";
  * import { Button, useFixedPositioning, useScaleTransition } from "@react-md/core";
@@ -61,10 +59,9 @@ export interface ScaleTransitionProps<E extends HTMLElement>
  *
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks
- * \@since 2.0.0
- * \@since 4.0.0 The typeParam was added and the API was updated.
- * \@since 6.0.0 Removed the built-in support for portalling.
+ * @since 2.0.0
+ * @since 4.0.0 The typeParam was added and the API was updated.
+ * @since 6.0.0 Removed the built-in support for portalling.
  */
 export function ScaleTransition<E extends HTMLElement>(
   props: ScaleTransitionProps<E>

package/src/transition/SkeletonPlaceholder.tsx

@@ -18,7 +18,7 @@ declare module "react" {
   }
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SkeletonPlaceholderProps
   extends HTMLAttributes<HTMLDivElement>,
     SkeletonPlaceholderOptions {
@@ -35,8 +35,7 @@ export interface SkeletonPlaceholderProps
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "@react";
  * import { SkeletonPlaceholder } from "@react-md/core";
@@ -55,8 +54,7 @@ export interface SkeletonPlaceholderProps
  * }
  * ```
  *
- * @example
- * Pre-rendered Layout
+ * @example Pre-rendered Layout
  * ```tsx
  * import type { ReactElement } from "@react";
  * import { SkeletonPlaceholder } from "@react-md/core";
@@ -135,7 +133,7 @@ export interface SkeletonPlaceholderProps
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const SkeletonPlaceholder = forwardRef<
   HTMLDivElement,

package/src/transition/Slide.tsx

@@ -16,7 +16,7 @@ declare module "react" {
   }
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SlideProps
   extends HTMLAttributes<HTMLDivElement>,
     CSSTransitionComponentProps,
@@ -40,7 +40,7 @@ export interface SlideProps
  * {@link useSlideTransition}.
  *
  * @see {@link SlideContainer} for example usage.
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const Slide = forwardRef<HTMLDivElement, SlideProps>(
   function Slide(props, nodeRef) {

package/src/transition/SlideContainer.tsx

@@ -5,8 +5,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-slide-container");
 
 /**
- * @example
- * Direction "left"
+ * @example Direction "left"
  * ```
  *           -------------
  *           |           |
@@ -25,8 +24,7 @@ const styles = bem("rmd-slide-container");
  *           -------------
  * ```
  *
- * @example
- * Direction "right"
+ * @example Direction "right"
  * ```
  *           -------------
  *           |           |
@@ -45,11 +43,11 @@ const styles = bem("rmd-slide-container");
  *           -------------
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type SlideDirection = "left" | "right";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SlideContainerClassNameOptions {
   className?: string;
 
@@ -59,7 +57,7 @@ export interface SlideContainerClassNameOptions {
 
 /**
  * @see {@link useSlideTransition} for an example
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function slideContainer(
   options: SlideContainerClassNameOptions
@@ -69,7 +67,7 @@ export function slideContainer(
   return cnb(styles({ [direction]: true }), className);
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface SlideContainerProps
   extends HTMLAttributes<HTMLDivElement>,
     SlideContainerClassNameOptions {}
@@ -78,8 +76,7 @@ export interface SlideContainerProps
  * **Server Component**
  * This is a server component, but generally relies on state so probably a client component.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { SlideContainer, Slide } from "@react-md/core";
  * import type { ReactElement, ReactNode } from "react";
@@ -122,8 +119,7 @@ export interface SlideContainerProps
  * }
  * ```
  *
- * @example
- * Persistent Slides
+ * @example Persistent Slides
  * ```tsx
  * import type { SlideDirection } from "@react-md/core";
  * import { SlideContainer, Slide } from "@react-md/core";
@@ -169,7 +165,7 @@ export interface SlideContainerProps
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(
   function SlideContainer(props, ref) {