@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/src/theme/useColorScheme.ts

@@ -1,45 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-import type { UseStateSetter } from "../types.js";
-
-/** @since 6.0.0 */
-export type ColorScheme = "light" | "dark";
-
-/** @since 6.0.0 */
-export type ColorSchemeMode = ColorScheme | "system";
-
-/**
- * @since 6.0.0
- */
-export interface ColorSchemeModeBehavior {
-  /**
-   * The current color scheme mode that is being used by your app that should
-   * default to the `$color-scheme` SCSS variable. If the
-   * {@link setColorSchemeMode} is called, this will update to that new value.
-   *
-   * TODO: Figure out how to document this
-   *
-   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
-   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
-   */
-  colorSchemeMode: ColorSchemeMode;
-
-  /**
-   * A function to update the color scheme.
-   *
-   * @see {@link useColorScheme} for an example usage
-   */
-  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
-}
-
-/** @since 6.0.0 */
-export interface ColorSchemeContext extends ColorSchemeModeBehavior {
-  /**
-   * The current color scheme that is being used. This is only useful when the
-   * {@link colorSchemeMode} is set to `"system"`.
-   */
-  colorScheme: ColorScheme;
-}
+import { type ColorSchemeContext } from "./types.js";
 
 const context = createContext<ColorSchemeContext>({
   colorScheme: "light",

package/src/theme/useColorSchemeMetaTag.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect } from "react";
-import { type ColorScheme } from "./useColorScheme.js";
+import { type ColorScheme } from "./types.js";
 
 /**
  * @since 6.0.0

package/src/theme/useColorSchemeProvider.ts

@@ -6,9 +6,9 @@ import {
   type ColorSchemeContext,
   type ColorSchemeMode,
   type ColorSchemeModeBehavior,
-} from "./useColorScheme.js";
+} from "./types.js";
 import { useColorSchemeMetaTag } from "./useColorSchemeMetaTag.js";
-import { usePrefersDarkTheme } from "./usePrefersColorScheme.js";
+import { usePrefersDarkTheme } from "./usePrefersDarkScheme.js";
 
 /**
  * @since 6.0.0

package/src/tooltip/useTooltip.ts

@@ -122,13 +122,13 @@ export interface TooltipPositioningOptions {
 export interface TooltippedElementEventHandlers<
   E extends HTMLElement = HTMLButtonElement,
 > {
-  onBlur?(event: FocusEvent<E>): void;
-  onFocus?(event: FocusEvent<E>): void;
-  onMouseEnter?(event: MouseEvent<E>): void;
-  onMouseLeave?(event: MouseEvent<E>): void;
-  onTouchStart?(event: TouchEvent<E>): void;
-  onTouchEnd?(event: TouchEvent<E>): void;
-  onContextMenu?(event: MouseEvent<E>): void;
+  onBlur?: (event: FocusEvent<E>) => void;
+  onFocus?: (event: FocusEvent<E>) => void;
+  onMouseEnter?: (event: MouseEvent<E>) => void;
+  onMouseLeave?: (event: MouseEvent<E>) => void;
+  onTouchStart?: (event: TouchEvent<E>) => void;
+  onTouchEnd?: (event: TouchEvent<E>) => void;
+  onContextMenu?: (event: MouseEvent<E>) => void;
 }
 
 /**
@@ -254,6 +254,12 @@ export interface TooltipOptions<
    * @since 6.0.0
    */
   overflowOnly?: boolean;
+
+  /**
+   * @see {@link FixedPositioningOptions.disabled}
+   * @defaultValue `false`
+   */
+  disableFixedPositioning?: boolean;
 }
 
 /**
@@ -265,7 +271,7 @@ export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
   id: string;
   ref: Ref<E>;
   dense: boolean;
-  style: CSSProperties;
+  style: CSSProperties | undefined;
   visible: boolean;
   position: SimplePosition;
 }
@@ -292,7 +298,7 @@ export interface TooltipImplementation<
    * This is a wrapper around the {@link setVisible} behavior that will also
    * clear any pending timeouts.
    */
-  hideTooltip(): void;
+  hideTooltip: () => void;
 
   /**
    * @since 6.0.0
@@ -422,6 +428,7 @@ export function useTooltip<
     onEntered = noop,
     onExited,
     overflowOnly,
+    disableFixedPositioning,
   } = options;
 
   const fallbackId = useId();
@@ -469,6 +476,7 @@ export function useTooltip<
     fixedTo: elementRef,
     anchor: getAnchor(position),
     disableSwapping: disableSwapping ?? !!determinedPosition,
+    disabled: disableFixedPositioning,
     getFixedPositionOptions() {
       let tooltipSpacing = dense ? denseSpacing : spacing;
       const tooltip = tooltipRef.current;

package/src/transition/SlideContainer.tsx

@@ -73,8 +73,8 @@ export interface SlideContainerProps
     SlideContainerClassNameOptions {}
 
 /**
- * **Server Component**
- * This is a server component, but generally relies on state so probably a client component.
+ * The `SlideContainer` is used to enable a slide transition when child `Slide`
+ * components change.
  *
  * @example Simple Example
  * ```tsx
@@ -119,52 +119,6 @@ export interface SlideContainerProps
  * }
  * ```
  *
- * @example Persistent Slides
- * ```tsx
- * import type { SlideDirection } from "@react-md/core";
- * import { SlideContainer, Slide } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
- * import { useState } from "react";
- *
- * interface State {
- *   direction: SlideDirection;
- *   activeIndex: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [state, setState] = useState<State>({
- *     direction: "left",
- *     activeIndex: 0,
- *   });
- *   const { direction, activeIndex } = state;
- *
- *   // when changing a slide, `direction` should be set to "left" if the
- *   // previous `activeIndex` is less than the next index
- *   //
- *   // i.e.
- *   // setState((prevState) => ({
- *   //   direction: prevState.activeIndex < index ? "left" : "right",
- *   //   activeIndex: index,
- *   // }))
- *
- *   // enabling `persistent` makes it so that the `<Slide>` never unmounts so
- *   // that state can be maintained while it is not active.
- *   return (
- *     <SlideContainer direction={direction}>
- *       <Slide active={activeIndex === 0} persistent>
- *         Slide 1
- *       </Slide>
- *       <Slide active={activeIndex === 1} persistent>
- *         Slide 2
- *       </Slide>
- *       <Slide active={activeIndex === 2} persistent>
- *         Slide 3
- *       </Slide>
- *     </SlideContainer>
- *   );
- * }
- * ```
- *
  * @since 6.0.0
  */
 export const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(

package/src/transition/types.ts

@@ -478,7 +478,7 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
    *
    * @param stage - The {@link TransitionStage} to set to
    */
-  transitionTo(stage: TransitionStage): void;
+  transitionTo: (stage: TransitionStage) => void;
 }
 
 /**

package/src/transition/useCarousel.ts

@@ -22,13 +22,13 @@ 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.
@@ -38,7 +38,7 @@ export interface CarouselImplementation extends CarouselState {
   /**
    * Toggles the {@link paused} state.
    */
-  togglePaused(): void;
+  togglePaused: () => void;
 
   /**
    * A convenience wrapper for the {@link setCarouselSlideState} that will

package/src/transition/useTransition.ts

@@ -206,6 +206,7 @@ export function useTransition<E extends HTMLElement>(
 
     if (reflow && ref.current && stage !== "exited" && stage !== "entered") {
       // force reflow by accessing scrollTop
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       ref.current.scrollTop;
     }
 

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,10 +1,9 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { TreeItem } from "./TreeItem.js";
 import {
   type DefaultTreeItemNode,
-  type TreeData,
   type TreeItemNode,
+  type TreeItemRendererProps,
 } from "./types.js";
 
 /**
@@ -21,8 +20,8 @@ import {
  */
 export function DefaultTreeItemRenderer<
   T extends TreeItemNode = DefaultTreeItemNode,
->(props: RenderRecursiveItemsProps<T, TreeData<T>>): ReactElement {
-  const { item: _item, parents, children: childItems } = props;
+>(props: TreeItemRendererProps<T>): ReactElement {
+  const { parents, children: childItems } = props;
   const item = props.item as DefaultTreeItemNode;
 
   const {

package/src/tree/Tree.tsx

@@ -11,10 +11,7 @@ import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import {
-  RenderRecursively,
-  type RenderRecursiveItemsProps,
-} from "../utils/RenderRecursively.js";
+import { RenderRecursively } from "../utils/RenderRecursively.js";
 import { identity } from "../utils/identity.js";
 import { DefaultTreeItemRenderer } from "./DefaultTreeItemRenderer.js";
 import { TreeProvider, type TreeExpansionMode } from "./TreeProvider.js";
@@ -22,6 +19,7 @@ import { tree } from "./styles.js";
 import {
   type TreeData,
   type TreeItemNode,
+  type TreeItemRendererProps,
   type TreeItemSorter,
 } from "./types.js";
 import { type TreeExpansion } from "./useTreeExpansion.js";
@@ -124,7 +122,7 @@ export interface TreeProps<T extends TreeItemNode>
    *   TreeItem,
    *   useKeyboardMovementContext,
    *   useTreeContext,
-   *   type RenderRecursiveItemsProps,
+   *   type TreeItemRendererProps,
    * } from "@react-md/core";
    * import FolderIcon from "@react-md/material-icons/FolderIcon";
    * import FolderOpenIcon from "@react-md/material-icons/FolderOpenIcon";
@@ -164,7 +162,7 @@ export interface TreeProps<T extends TreeItemNode>
    * @see {@link DefaultTreeItemRenderer}
    * @defaultValue `DefaultTreeItemRenderer`
    */
-  renderer?: ComponentType<RenderRecursiveItemsProps<T, TreeData<T>>>;
+  renderer?: ComponentType<TreeItemRendererProps<T>>;
 
   /**
    * The link component to use for any tree item nodes that have a `to` or

package/src/tree/TreeItem.tsx

@@ -6,6 +6,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
@@ -19,11 +20,16 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
 import { type DefaultTreeItemNode } from "./types.js";
 
 /**
- * @since 6.0.0  Added the `groupProps` prop.
+ * @since 6.0.0 Added `liProps` and `groupProps`.
+ * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in
+ * favor of `liProps={{ ref, style, className }}`.
+ * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,
+ * `contentComponent`, and `readOnly` props were removed.
  */
 export interface TreeItemProps
   extends Omit<DefaultTreeItemNode, "parentId">,
-    HTMLAttributes<HTMLLIElement> {
+    HTMLAttributes<HTMLLIElement>,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"tree-item-" + useId()`
    */
@@ -80,8 +86,11 @@ export interface TreeItemProps
  * **Client Component**
  *
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
- * @since 6.0.0 The wrapping `<li>` element will always be `role="none"` and
- * the `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
+ * @since 6.0.0 No longer forwards refs. The ref must be provided using
+ * `contentRef` instead.
+ * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.
+ * @since 6.0.0 The wrapping `<li>` element will always be `role="none"` and the
+ * `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
  * easier to pass event handlers because of the nested behavior of tree items.
  * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and
  * `aria-posinset` attributes and allows the browser to compute them instead.
@@ -133,6 +142,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     onTouchEnd,
     onTouchMove,
     contentRef,
+    disableRipple,
     ...remaining
   } = props;
 
@@ -172,15 +182,18 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     lookup.itemToElement[itemId] = id;
 
     return () => {
+      /* eslint-disable @typescript-eslint/no-dynamic-delete */
       delete lookup.disabledItems[itemId];
       delete lookup.expandable[itemId];
       delete lookup.elementToItem[id];
       delete lookup.itemToElement[itemId];
+      /* eslint-enable @typescript-eslint/no-dynamic-delete */
     };
   }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);
 
   const { pressedClassName, ripples, handlers } =
     useElementInteraction<HTMLLIElement>({
+      mode: disableRipple ? "none" : undefined,
       onBlur,
       onClick(event) {
         onClick?.(event);
@@ -206,7 +219,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
   // cheating a bit so there are type errors around the event handlers
   const ContentComponent = (isLink ? Link : "span") as "span";
   const leftAddonType =
-    propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;
+    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? "media" : undefined;
   const isMediaLeftAddon =
     typeof propLeftAddonType === "undefined" && leftAddonType === "media";
   const disableLeftAddonCenteredMedia =

package/src/tree/TreeItemExpander.tsx

@@ -60,7 +60,7 @@ export function TreeItemExpander(props: TreeItemExpanderProps): ReactElement {
   }
 
   const isCloneable = isValidElement(icon);
-  let clickProps: { onClick: MouseEventHandler<Element> } | undefined;
+  let clickProps: { onClick: MouseEventHandler } | undefined;
   if (expansionMode === "manual" && !disabled) {
     clickProps = {
       onClick(event) {

package/src/tree/types.ts

@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
-import type { ListItemChildrenProps } from "../list/types.js";
-import type { UseStateInitializer } from "../types.js";
+import { type ReactNode } from "react";
+import { type ListItemChildrenProps } from "../list/types.js";
+import { type UseStateInitializer } from "../types.js";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 
 /**
  * @since 6.0.0 This was renamed from `TreeItemIds`
@@ -103,15 +104,17 @@ export type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<
 >;
 
 /**
- * @since 6.0.0 This used to be `TreeItemIds` but was converted to a
- * Set to increase performance for large trees.
+ * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to
+ * a `Set` to increase performance for large trees.
  */
 export type TreeItemIdSet = ReadonlySet<string>;
 
 /**
  * @since 6.0.0
  */
-export type TreeItemDefaultIds = UseStateInitializer<readonly string[]>;
+export type TreeDefaultIds = UseStateInitializer<
+  readonly string[] | ReadonlySet<string>
+>;
 
 /**
  * A function to call that will sort the items within the tree for each unique
@@ -144,3 +147,10 @@ export type TreeItemDefaultIds = UseStateInitializer<readonly string[]>;
 export type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (
   items: readonly T[]
 ) => readonly T[];
+
+/**
+ * @since 6.0.0
+ */
+export type TreeItemRendererProps<
+  T extends TreeItemNode = DefaultTreeItemNode,
+> = RenderRecursiveItemsProps<T, TreeData<T>>;

package/src/tree/useTree.ts

@@ -1,5 +1,5 @@
 "use client";
-import { type TreeItemDefaultIds } from "./types.js";
+import { type TreeDefaultIds } from "./types.js";
 import { useTreeExpansion, type TreeExpansion } from "./useTreeExpansion.js";
 import { useTreeSelection, type TreeSelection } from "./useTreeSelection.js";
 
@@ -15,12 +15,12 @@ export interface TreeHookOptions {
   /**
    * @defaultValue `[]`
    */
-  defaultExpandedIds?: TreeItemDefaultIds;
+  defaultExpandedIds?: TreeDefaultIds;
 
   /**
    * @defaultValue `[]`
    */
-  defaultSelectedIds?: TreeItemDefaultIds;
+  defaultSelectedIds?: TreeDefaultIds;
 }
 
 /**

package/src/tree/useTreeExpansion.ts

@@ -1,7 +1,7 @@
 "use client";
-import { useCallback, useState } from "react";
-import type { UseStateSetter } from "../types.js";
-import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
+import { type UseStateSetter } from "../types.js";
+import { useReadonlySet } from "../useReadonlySet.js";
+import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
  * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set
@@ -11,7 +11,7 @@ import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
  */
 export interface TreeExpansion {
   expandedIds: TreeItemIdSet;
-  toggleTreeItemExpansion(itemId: string): void;
+  toggleTreeItemExpansion: (itemId: string) => void;
   expandMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 
@@ -20,33 +20,15 @@ export interface TreeExpansion {
  * instead of a list to increase performance.
  */
 export function useTreeExpansion(
-  defaultExpandedIds?: TreeItemDefaultIds
+  defaultExpandedIds?: TreeDefaultIds
 ): TreeExpansion {
-  const [expandedIds, setExpandedIds] = useState<TreeItemIdSet>(() => {
-    const defaultIds =
-      typeof defaultExpandedIds === "function"
-        ? defaultExpandedIds()
-        : defaultExpandedIds;
-
-    return new Set(defaultIds);
+  const { value, setValue, toggleValue } = useReadonlySet({
+    defaultValue: defaultExpandedIds,
   });
 
-  const toggleTreeItemExpansion = useCallback((itemId: string) => {
-    setExpandedIds((prevExpandedIds) => {
-      const expandedIds = new Set(prevExpandedIds);
-      if (expandedIds.has(itemId)) {
-        expandedIds.delete(itemId);
-      } else {
-        expandedIds.add(itemId);
-      }
-
-      return expandedIds;
-    });
-  }, []);
-
   return {
-    expandedIds,
-    toggleTreeItemExpansion,
-    expandMultipleTreeItems: setExpandedIds,
+    expandedIds: value,
+    toggleTreeItemExpansion: toggleValue,
+    expandMultipleTreeItems: setValue,
   };
 }

package/src/tree/useTreeSelection.ts

@@ -1,7 +1,7 @@
 "use client";
-import { useCallback, useState } from "react";
-import type { UseStateSetter } from "../types.js";
-import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
+import { type UseStateSetter } from "../types.js";
+import { useReadonlySet } from "../useReadonlySet.js";
+import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
  * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set
@@ -13,7 +13,7 @@ export interface TreeSelection {
   /** @defaultValue `false` */
   multiSelect?: boolean;
   selectedIds: ReadonlySet<string>;
-  toggleTreeItemSelection(itemId: string): void;
+  toggleTreeItemSelection: (itemId: string) => void;
   selectMultipleTreeItems: UseStateSetter<TreeItemIdSet>;
 }
 
@@ -22,42 +22,18 @@ export interface TreeSelection {
  * instead of a list to increase performance.
  */
 export function useTreeSelection(
-  defaultSelectedIds?: TreeItemDefaultIds,
+  defaultSelectedIds?: TreeDefaultIds,
   multiSelect = false
 ): Required<TreeSelection> {
-  const [selectedIds, setSelectedIds] = useState<TreeItemIdSet>(() => {
-    const defaultIds =
-      typeof defaultSelectedIds === "function"
-        ? defaultSelectedIds()
-        : defaultSelectedIds;
-
-    return new Set(defaultIds);
+  const { value, setValue, toggleValue } = useReadonlySet({
+    toggleType: multiSelect ? "multiple" : "single-select",
+    defaultValue: defaultSelectedIds,
   });
 
-  const toggleTreeItemSelection = useCallback(
-    (itemId: string) => {
-      setSelectedIds((selectedIds) => {
-        if (!multiSelect) {
-          return selectedIds.has(itemId) ? selectedIds : new Set([itemId]);
-        }
-
-        const nextSelectedIds = new Set(selectedIds);
-        if (selectedIds.has(itemId)) {
-          nextSelectedIds.delete(itemId);
-        } else {
-          nextSelectedIds.add(itemId);
-        }
-
-        return nextSelectedIds;
-      });
-    },
-    [multiSelect]
-  );
-
   return {
-    selectedIds,
     multiSelect,
-    toggleTreeItemSelection,
-    selectMultipleTreeItems: setSelectedIds,
+    selectedIds: value,
+    toggleTreeItemSelection: toggleValue,
+    selectMultipleTreeItems: setValue,
   };
 }

package/src/tree/utils.ts

@@ -1,4 +1,8 @@
-import type { TreeItemNode, TreeData, DefaultTreeItemNode } from "./types.js";
+import {
+  type DefaultTreeItemNode,
+  type TreeData,
+  type TreeItemNode,
+} from "./types.js";
 
 /**
  * This will get all the items from the provided itemId up to the root of the
@@ -48,7 +52,7 @@ export function getChildTreeItems<T extends TreeItemNode = DefaultTreeItemNode>(
   parentId: string | null,
   recursive = false
 ): readonly T[] {
-  const items = Array.isArray(data) ? data : Object.values(data);
+  const items: readonly T[] = Array.isArray(data) ? data : Object.values(data);
 
   return items.reduce<T[]>((list, item) => {
     if (parentId !== item.parentId) {

package/src/types.ts

@@ -5,7 +5,7 @@ import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
  * object even though a `ref` isn't a real prop.
  */
 export type PropsWithRef<
-  Props extends {},
+  Props extends object,
   Element extends HTMLElement,
 > = Props & {
   /**
@@ -18,7 +18,7 @@ export type PropsWithRef<
  * A simple type that can be used for different components that clone a
  * `className` into a child component.
  */
-export type ClassNameCloneableChild<T = {}> = ReactElement<
+export type ClassNameCloneableChild<T = object> = ReactElement<
   T & { className?: string }
 >;
 
@@ -171,12 +171,28 @@ export type CssPosition = "fixed" | "sticky" | "static";
  * @since 6.0.0
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyFunction = (...args: any[]) => any | void;
+export type AnyFunction = (...args: any[]) => any;
 
 /**
  * @since 6.0.0
  */
-export type CancelableFunction<F extends AnyFunction> = F & { cancel(): void };
+export type CancelableFunction<F extends AnyFunction> = F & {
+  cancel: () => void;
+};
+
+/**
+ * @since 6.0.0
+ */
+export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => void
+>;
+
+/**
+ * @since 6.0.0
+ */
+export type ThrottledFunction<F extends AnyFunction> = CancelableFunction<
+  (...args: Parameters<F>) => ReturnType<F>
+>;
 
 /**
  * @since 6.0.0

package/src/typography/SrOnly.tsx

@@ -27,7 +27,8 @@ export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
 }
 
 /**
- * **Server Component**
+ * The `SrOnly` component is used to render content that is only visible to
+ * screen readers.
  *
  * @example Simple Example
  * ```tsx