@react-md/core 1.0.0-next.12 → 1.0.0-next.14

package/src/tabs/TabList.tsx

@@ -20,7 +20,7 @@ import { type GetTabListScrollToOptions } from "./utils.js";
 import { type useTabs } from "./useTabs.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
   activeIndex: number;
@@ -132,7 +132,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see {@link useTabs} for example usage.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   function TabList(props, ref) {

package/src/tabs/TabListScrollButton.tsx

@@ -24,7 +24,7 @@ import {
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BaseTabListScrollButtonProps
   extends HTMLAttributes<HTMLDivElement>,
@@ -40,7 +40,7 @@ export interface BaseTabListScrollButtonProps
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
   type: "back" | "forward";
@@ -52,7 +52,7 @@ export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
  * **Client Component**
  *
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const TabListScrollButton = forwardRef<
   HTMLDivElement,

package/src/tabs/tabIndicatorStyles.ts

@@ -4,7 +4,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-tab-indicator");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabIndicatorClassNameOptions {
   className?: string;
@@ -14,7 +14,7 @@ export interface TabIndicatorClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tabIndicator(
   options: TabIndicatorClassNameOptions = {}

package/src/tabs/tabListScrollButtonStyles.ts

@@ -4,7 +4,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-tablist-button");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListScrollButtonContainerClassNameOptions {
   className?: string;
@@ -12,7 +12,7 @@ export interface TabListScrollButtonContainerClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tabListScrollButtonContainer(
   options: TabListScrollButtonContainerClassNameOptions
@@ -29,14 +29,14 @@ export function tabListScrollButtonContainer(
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListScrollButtonClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tabListScrollButton(
   options: TabListScrollButtonClassNameOptions = {}

package/src/tabs/tabListStyles.ts

@@ -10,7 +10,7 @@ const styles = bem("rmd-tablist");
 export type TabsAlignment = "left" | "center" | "right";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListClassNameOptions {
   className?: string;
@@ -24,7 +24,7 @@ export interface TabListClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tabList(options: TabListClassNameOptions = {}): string {
   const {

package/src/tabs/tabStyles.ts

@@ -15,7 +15,7 @@ declare module "react" {
 const styles = bem("rmd-tab");
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabClassNameOptions {
   className?: string;
@@ -29,7 +29,7 @@ export interface TabClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function tab(options: TabClassNameOptions = {}): string {
   const {

package/src/tabs/useTabs.ts

@@ -10,7 +10,7 @@ const EMPTY_LIST = [] as const;
 const PANEL_PREFIX = "panel-";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabsHookOptions<TabValue extends string | number = number> {
   /**
@@ -58,7 +58,7 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabProps {
   "aria-controls": string;
@@ -67,7 +67,7 @@ export interface ProvidedTabProps {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabListProps {
   activeIndex: number;
@@ -75,7 +75,7 @@ export interface ProvidedTabListProps {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabPanelProps {
   "aria-labelledby": string;
@@ -85,7 +85,7 @@ export interface ProvidedTabPanelProps {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabPanelsProps<E extends HTMLElement> {
   ref: Ref<E>;
@@ -93,7 +93,7 @@ export interface ProvidedTabPanelsProps<E extends HTMLElement> {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabsImplementation<TabValue extends string | number = number> {
   direction: SlideDirection;
@@ -107,8 +107,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
 }
 
 /**
- * @example
- * Super Simple
+ * @example Super Simple
  * ```tsx
  * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -142,7 +141,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTabs(): TabsImplementation<number> & {
   activeTab: number;
@@ -152,8 +151,7 @@ export function useTabs(): TabsImplementation<number> & {
  * The tab behavior can be controlled by providing the `activeTab` and
  * `setActiveTab` options.
  *
- * @example
- * Controlled
+ * @example Controlled
  * ```tsx
  * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -191,7 +189,7 @@ export function useTabs(): TabsImplementation<number> & {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTabs<TabValue extends number>(
   options: TabsHookOptions<TabValue> & {
@@ -216,8 +214,7 @@ export function useTabs<TabValue extends number>(
  * When using string values, the {@link TabsHookOptions.tabs} option **must** be
  * provided to determine the correct active tab index.
  *
- * @example
- * String Value Simple
+ * @example String Value Simple
  * ```tsx
  * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -253,7 +250,7 @@ export function useTabs<TabValue extends number>(
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTabs<TabValue extends string>(
   options: TabsHookOptions<TabValue> & {
@@ -270,8 +267,7 @@ export function useTabs<TabValue extends string>(
  * When using string values, the {@link TabsHookOptions.tabs} option **must** be
  * provided to determine the correct active tab index.
  *
- * @example
- * String Controlled Simple
+ * @example String Controlled Simple
  * ```tsx
  * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -311,8 +307,7 @@ export function useTabs<TabValue extends string>(
  * }
  * ```
  *
- * @example
- * Navigation Tabs
+ * @example Navigation Tabs
  * ```tsx
  * "use client";
  * import {
@@ -396,7 +391,7 @@ export function useTabs<TabValue extends string>(
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTabs<TabValue extends string>(
   options: TabsHookOptions<TabValue> & {
@@ -410,7 +405,7 @@ export function useTabs<TabValue extends string>(
  * This hook can be uncontrolled/controlled and supports strongly typing the tab
  * values if needed. Check out the overloads for examples.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTabs<TabValue extends string | number>(
   options: TabsHookOptions<TabValue> = {}

package/src/tabs/utils.ts

@@ -46,7 +46,7 @@ export const scrollTabIntoView = (options: ScrollOptions): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabListScrollToOptions {
   isRTL: boolean;
@@ -57,14 +57,14 @@ export interface TabListScrollToOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type GetTabListScrollToOptions = (
   options: TabListScrollToOptions
 ) => ScrollToOptions | undefined;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const getTabListScrollToOptions: GetTabListScrollToOptions = (
   options

package/src/test-utils/ResizeObserver.ts

@@ -5,7 +5,7 @@ import {
 } from "../useResizeObserver.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ResizeObserverEntrySize {
   height?: number;
@@ -13,7 +13,7 @@ export interface ResizeObserverEntrySize {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type GetResizeObserverEntryMock = (
   target: Element,
@@ -24,7 +24,7 @@ export type GetResizeObserverEntryMock = (
  * This is mostly an internal function to be used with the {@link ResizeObserverMock}
  * and {@link setupResizeObserverMock}
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const createResizeObserverEntry: GetResizeObserverEntryMock = (
   target,
@@ -57,7 +57,7 @@ export const createResizeObserverEntry: GetResizeObserverEntryMock = (
  * exist in jsdom. You normally should not use this directly and instead use the
  * {@link setupResizeObserverMock} instead.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export class ResizeObserverMock implements ResizeObserver {
   elements: Set<Element>;
@@ -83,8 +83,7 @@ export class ResizeObserverMock implements ResizeObserver {
    * Triggers the resize event for a specific element. This must be wrapped in
    * `act`.
    *
-   * @example
-   * Main Usage
+   * @example Main Usage
    * ```tsx
    * import {
    *   cleanupResizeObserverAfterEach,
@@ -190,7 +189,7 @@ export class ResizeObserverMock implements ResizeObserver {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SetupResizeObserverMockOptions {
   /**
@@ -216,8 +215,7 @@ export interface SetupResizeObserverMockOptions {
 /**
  * Initializes the `ResizeObserverMock` to be used for tests.
  *
- * @example
- * Main Usage
+ * @example Main Usage
  * ```tsx
  * import { useCallback, useState } from "react";
  * import {
@@ -282,7 +280,7 @@ export interface SetupResizeObserverMockOptions {
  * })
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function setupResizeObserverMock(
   options: SetupResizeObserverMockOptions = {}
@@ -305,7 +303,7 @@ export function setupResizeObserverMock(
 
 /**
  * @see {@link setupResizeObserverMock}
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {
   afterEach(() => {

package/src/test-utils/matchMedia.ts

@@ -14,7 +14,7 @@ const noop = (): void => {
 /**
  * @see {@link spyOnMatchMedia} instead
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const BASE_MEDIA_QUERY_LIST: MediaQueryList = {
   media: "",
@@ -27,12 +27,12 @@ export const BASE_MEDIA_QUERY_LIST: MediaQueryList = {
   dispatchEvent: () => false,
 };
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type MatchMediaMatcher = (query: string) => boolean;
 
 /**
  * @see {@link spyOnMatchMedia} for usage
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @returns `true` for phone media queries
  */
 export const matchPhone: MatchMediaMatcher = (query) =>
@@ -40,7 +40,7 @@ export const matchPhone: MatchMediaMatcher = (query) =>
 
 /**
  * @see {@link spyOnMatchMedia} for usage
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @returns `true` for tablet media queries
  */
 export const matchTablet: MatchMediaMatcher = (query) =>
@@ -48,7 +48,7 @@ export const matchTablet: MatchMediaMatcher = (query) =>
 
 /**
  * @see {@link spyOnMatchMedia} for usage
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @returns `true` for desktop media queries
  */
 export const matchDesktop: MatchMediaMatcher = (query) =>
@@ -56,7 +56,7 @@ export const matchDesktop: MatchMediaMatcher = (query) =>
 
 /**
  * @see {@link spyOnMatchMedia} for usage
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @returns `true` for large desktop media queries
  */
 export const matchLargeDesktop: MatchMediaMatcher = (query) =>
@@ -64,21 +64,20 @@ export const matchLargeDesktop: MatchMediaMatcher = (query) =>
 
 /**
  * @see {@link spyOnMatchMedia} for usage
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @returns `true` for both desktop and large desktop media queries
  */
 export const matchAnyDesktop: MatchMediaMatcher = (query) =>
   matchDesktop(query) || matchLargeDesktop(query);
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type MatchMediaSpiedFunction = jest.SpiedFunction<
   typeof window.matchMedia
 > & {
   /**
-   * @example
-   * Default Behavior
+   * @example Default Behavior
    * ```tsx
    * const matchMedia = spyOnMatchMedia();
    * render(<Test />);
@@ -89,8 +88,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
    * // expect phone results
    * ```
    *
-   * @example
-   * Custom Act Behavior
+   * @example Custom Act Behavior
    * ```tsx
    * const matchMedia = spyOnMatchMedia();
    * const { rerender } = render(<Test />);
@@ -107,8 +105,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
 };
 
 /**
- * @example
- * Default Behavior
+ * @example Default Behavior
  * ```tsx
  * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
  *
@@ -121,8 +118,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
  * // expect phone results
  * ```
  *
- * @example
- * Set Default Media
+ * @example Set Default Media
  * ```tsx
  * import { matchPhone, render, spyOnMatchMedia } from "@react-md/test-utils";
  *
@@ -132,7 +128,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<
  * // expect phone results
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function spyOnMatchMedia(
   defaultMatch: MatchMediaMatcher = matchDesktop

package/src/test-utils/render.tsx

@@ -9,7 +9,7 @@ import { Fragment, type ReactElement } from "react";
 import { CoreProviders, type CoreProvidersProps } from "../CoreProviders.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ReactMDRenderOptions<
   Q extends Queries = typeof queries,
@@ -20,7 +20,7 @@ export interface ReactMDRenderOptions<
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function rmdRender<
   Q extends Queries = typeof queries,

package/src/test-utils/timers.ts

@@ -17,8 +17,7 @@ import { jest } from "@jest/globals";
  * });
  * ```
  *
- * @example
- * Automatic Cleanup
+ * @example Automatic Cleanup
  * ```ts
  * import { useImmediateRaf } from "@react-md/core/test-utils";
  *
@@ -35,7 +34,7 @@ import { jest } from "@jest/globals";
  * });
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const useImmediateRaf = (): jest.SpiedFunction<
   typeof requestAnimationFrame

package/src/theme/LocalStorageColorSchemeProvider.tsx

@@ -5,7 +5,7 @@ import { ColorSchemeProvider, type ColorSchemeMode } from "./useColorScheme.js";
 import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface LocalStorageColorSchemeProviderProps {
   /**
@@ -98,7 +98,7 @@ export interface LocalStorageColorSchemeProviderProps {
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function LocalStorageColorSchemeProvider(
   props: LocalStorageColorSchemeProviderProps

package/src/theme/ThemeProvider.tsx

@@ -63,7 +63,7 @@ declare module "react" {
   }
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ThemeColors {
   primaryColor: string;
   onPrimaryColor: string;
@@ -77,7 +77,7 @@ export interface ThemeColors {
   onSuccessColor: string;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ThemeTextColors {
   textPrimaryColor: string;
   textSecondaryColor: string;
@@ -85,24 +85,23 @@ export interface ThemeTextColors {
   textDisabledColor: string;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {
   backgroundColor: string;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ThemeContext extends ConfigurableThemeColors {
   /**
-   * This will be `true` if a `theme` wsa not provided to the {@link ThemeProvider}
+   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}
    */
   derived: boolean;
 
   /**
-   * @example
-   * Simple Example
+   * @example Simple Example
    * ```tsx
    * import { getDerivedTheme, useHtmlClassName, useTheme } from "@react-md/core";
    * import { useEffect } from "react";
@@ -129,7 +128,7 @@ export interface ThemeContext extends ConfigurableThemeColors {
   setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {
   primaryColor: blue500,
   onPrimaryColor: black,
@@ -143,7 +142,7 @@ export const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {
   onSuccessColor: black,
 };
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {
   ...DEFAULT_THEME_COLORS,
   backgroundColor: "#fafafa",
@@ -153,7 +152,7 @@ export const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {
   textDisabledColor: "#9e9e9e",
 };
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {
   ...DEFAULT_THEME_COLORS,
   backgroundColor: "#121212",
@@ -167,7 +166,7 @@ const context = createContext<Readonly<ThemeContext> | undefined>(undefined);
 context.displayName = "Theme";
 const { Provider } = context;
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export const getDerivedTheme = (
   container: Element = document.documentElement
 ): Readonly<ConfigurableThemeColors> => {
@@ -211,8 +210,7 @@ export const getDerivedTheme = (
  * This hook can be used to access the current theme set by the
  * {@link ThemeProvider}.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { useTheme } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -224,14 +222,14 @@ export const getDerivedTheme = (
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @throws "The `ThemeProvider` has not been initialized."
  */
 export function useTheme(): Readonly<ThemeContext>;
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useTheme(
   allowUndefined: true
@@ -239,7 +237,7 @@ export function useTheme(
 
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @throws "The `ThemeProvider` has not been initialized."
  */
 export function useTheme(
@@ -253,7 +251,7 @@ export function useTheme(
   return theme;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ThemeProviderProps {
   /**
    * When this is `undefined`, the theme will be derived by computing the
@@ -328,8 +326,7 @@ export interface ThemeProviderProps {
  * );
  * ```
  *
- * @example
- * Automatically Deriving the Theme
+ * @example Automatically Deriving the Theme
  * ```tsx
  * import {
  *   CoreProviders,
@@ -354,7 +351,7 @@ export interface ThemeProviderProps {
  * );
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   const { children, theme } = props;