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

package/src/box/styles.ts

@@ -13,7 +13,7 @@ declare module "react" {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxAlignItems =
   | "start"
@@ -24,7 +24,7 @@ export type BoxAlignItems =
   | "stretch";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxJustifyContent =
   | BoxAlignItems
@@ -33,12 +33,12 @@ export type BoxJustifyContent =
   | "space-evenly";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxFlexDirection = "row" | "column";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxOptions {
   className?: string;
@@ -73,12 +73,11 @@ export interface BoxOptions {
   disablePadding?: boolean;
 
   /**
-   * This is a grid configuration
-   * This should match one of the names in the `$grids` map. So for example:
+   * This should match one of the names in the `$box-grids` map. So for example:
    *
    * ```scss
    * @use "react-md" with (
-   *   $grids: (
+   *   $box-grids: (
    *     small: (
    *       min: 5rem
    *     ),
@@ -108,7 +107,8 @@ export interface BoxOptions {
   align?: BoxAlignItems;
 
   /**
-   * The default value is really `center` or whatever the `$default-align-items` is set to.
+   * The default value is really `center` or whatever the
+   * `$box-default-align-items` is set to.
    *
    * @defaultValue `""`
    */
@@ -133,7 +133,7 @@ export interface BoxOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function box(options: BoxOptions = {}): string {
   const {

package/src/button/AsyncButton.tsx

@@ -22,7 +22,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type AsyncButtonLoadingType =
   | "circular-before"
@@ -32,7 +32,7 @@ export type AsyncButtonLoadingType =
   | "linear-below";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
   /**
@@ -137,8 +137,7 @@ export interface AsyncButtonProps extends ButtonProps {
  * `loading` prop or returning a promise from the `onClick` event which will
  * continue to show the loading indicator until the promise has been resolved.
  *
- * @example
- * Async onClick
+ * @example Async onClick
  * ```tsx
  * import { AsyncButton } from "@react-md/core";
  * import { useState, type ReactElement } from "react";
@@ -160,8 +159,7 @@ export interface AsyncButtonProps extends ButtonProps {
  * }
  * ```
  *
- * @example
- * Manual Loading State
+ * @example Manual Loading State
  * ```tsx
  * import { AsyncButton } from "@react-md/core";
  * import { useMutation } from "@tanstack/query";
@@ -189,7 +187,7 @@ export interface AsyncButtonProps extends ButtonProps {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
   function AsyncButton(props, ref) {

package/src/button/Button.tsx

@@ -32,8 +32,7 @@ export interface ButtonProps
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Button } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -51,8 +50,7 @@ export interface ButtonProps
  * }
  * ```
  *
- * @example
- * Theme Example
+ * @example Theme Example
  * ```tsx
  * import { Button } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -72,8 +70,7 @@ export interface ButtonProps
  * }
  * ```
  *
- * @example
- * Icon Button Example
+ * @example Icon Button Example
  * ```tsx
  * import { Button } from "@react-md/core";
  * import { FavoriteSVGIcon } from "@react-md/material-icons";
@@ -95,8 +92,7 @@ export interface ButtonProps
  * }
  * ```
  *
- * @example
- * Text Button with icons
+ * @example Text Button with icons
  * ```tsx
  * import { Button } from "@react-md/core";
  * import { FavoriteSVGIcon } from "@react-md/material-icons";

package/src/button/ButtonUnstyled.tsx

@@ -6,7 +6,7 @@ import { buttonUnstyled } from "./buttonUnstyledStyles.js";
  * attributes without the `type` since this component forces the `type="button"`
  * value.
  *
- * @remarks \@since 6.0.0 Renamed from `UnstyledButtonProps`
+ * @since 6.0.0 Renamed from `UnstyledButtonProps`
  */
 export type ButtonUnstyledProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -22,7 +22,7 @@ export type ButtonUnstyledProps = Omit<
  * Requires the `$disable-unstyled-utility-class` to be `false` to use.
  *
  * @see {@link buttonUnstyled}
- * @remarks \@since 6.0.0 Renamed from `UnstyledButton`
+ * @since 6.0.0 Renamed from `UnstyledButton`
  */
 export const ButtonUnstyled = forwardRef<
   HTMLButtonElement,

package/src/button/FloatingActionButton.tsx

@@ -13,7 +13,7 @@ const styles = bem("rmd-fab");
 /**
  * The position within the viewport for the floating action button.
  *
- * @remarks \@since 6.0.0 This was renamed from `FABPosition`
+ * @since 6.0.0 This was renamed from `FABPosition`
  */
 export type FloatingActionButtonPosition =
   | "bottom-left"
@@ -23,7 +23,7 @@ export type FloatingActionButtonPosition =
   | null;
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export interface FloatingActionButtonClassNameOptions {
@@ -41,7 +41,7 @@ export interface FloatingActionButtonClassNameOptions {
 /**
  * FAB = Floating Action Button
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export function fab(options: FloatingActionButtonClassNameOptions): string {
@@ -59,13 +59,13 @@ export function fab(options: FloatingActionButtonClassNameOptions): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface FloatingActionButtonProps
   extends HTMLAttributes<HTMLSpanElement>,
     FloatingActionButtonClassNameOptions {}
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  * @internal
  */
 export const FloatingActionButton = forwardRef<

package/src/button/TooltippedButton.tsx

@@ -10,12 +10,8 @@ import {
 import { Button, type ButtonProps } from "./Button.js";
 import { type ButtonType } from "./buttonStyles.js";
 
-const noop = (): void => {
-  // do nothing
-};
-
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TooltippedButtonProps extends ButtonProps {
   /** @defaultValue `"icon"` */
@@ -72,7 +68,7 @@ export interface TooltippedButtonProps extends ButtonProps {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const TooltippedButton = forwardRef<
   HTMLButtonElement,
@@ -83,13 +79,13 @@ export const TooltippedButton = forwardRef<
     tooltipProps,
     tooltipOptions,
     buttonType = "icon",
-    onBlur = noop,
-    onFocus = noop,
-    onMouseEnter = noop,
-    onMouseLeave = noop,
-    onTouchStart = noop,
-    onTouchEnd = noop,
-    onContextMenu = noop,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    onTouchEnd,
+    onContextMenu,
     ...remaining
   } = props;
   const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({

package/src/button/buttonStyles.ts

@@ -58,7 +58,7 @@ export type ButtonTheme = ThemeColor | "clear" | "disabled";
  */
 export type ButtonThemeType = "flat" | "outline" | "contained";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ButtonClassNameThemeOptions {
   className?: string;
 
@@ -95,7 +95,7 @@ export interface ButtonClassNameThemeOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {
   /** @defaultValue `false` */
@@ -111,7 +111,7 @@ export interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {
  * @param options - An object containing the themeable button props to generate a
  * button theme className.
  * @returns a string of class names to create an element with a button theme.
- * @remarks \@since 6.0.0 This used to be called `buttonThemeClassNames`.
+ * @since 6.0.0 This used to be called `buttonThemeClassNames`.
  */
 export function button(options: ButtonClassNameOptions = {}): string {
   const {

package/src/button/buttonUnstyledStyles.ts

@@ -1,6 +1,6 @@
 import { cnb } from "cnbuilder";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ButtonUnstyledClassNameOptions {
   className?: string;
 }
@@ -8,7 +8,7 @@ export interface ButtonUnstyledClassNameOptions {
 /**
  * This requires the `$disable-unstyled-utility-class` to be `false` to use.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function buttonUnstyled(
   options: ButtonUnstyledClassNameOptions = {}

package/src/card/Card.tsx

@@ -10,7 +10,7 @@ declare module "react" {
 }
 
 /**
- * @remarks \@since 6.0.0 Extends the {@link CardClassNameOptions}.
+ * @since 6.0.0 Extends the {@link CardClassNameOptions}.
  */
 export interface CardProps
   extends HTMLAttributes<HTMLDivElement>,
@@ -19,8 +19,7 @@ export interface CardProps
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import {
  *   Button,
@@ -55,7 +54,7 @@ export interface CardProps
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
+ * @since 6.0.0 Removed the deprecated `raiseable` prop
  */
 export const Card = forwardRef<HTMLDivElement, CardProps>(
   function Card(props, ref) {

package/src/card/CardContent.tsx

@@ -2,8 +2,7 @@ import { forwardRef, type HTMLAttributes } from "react";
 import { cardContent, type CardContentClassNameOptions } from "./styles.js";
 
 /**
- * @remarks
- * \@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
+ * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */
 export interface CardContentProps
@@ -13,8 +12,7 @@ export interface CardContentProps
 /**
  * **Server Component**
  *
- * @remarks
- * \@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
+ * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */
 export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(

package/src/card/CardFooter.tsx

@@ -3,7 +3,7 @@ import { Box, type BoxProps } from "../box/Box.js";
 import { type BoxJustifyContent } from "../box/styles.js";
 import { cardFooter } from "./styles.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardFooterProps extends BoxProps {
   /**
    * @defaultValue `"flex-end"`
@@ -17,7 +17,7 @@ export interface CardFooterProps extends BoxProps {
  * A simple wrapper around the {@link Box} component that applies additional
  * padding and applies `justify-content: flex-end;` by default.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   function CardFooter(props, ref) {

package/src/card/CardHeader.tsx

@@ -3,12 +3,11 @@ import { type PropsWithRef } from "../types.js";
 import { cardHeader, cardHeaderContent } from "./styles.js";
 
 /**
- * @remarks
- * \@since 6.0.0 Removed the `align` prop.
- * \@since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
+ * @since 6.0.0 Removed the `align` prop.
+ * @since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
  * `beforeAddon` and `afterAddon`.
- * \@since 6.0.0 Removed the `contentClassName` prop in favor of the
- * {@link contentProps}.
+ * @since 6.0.0 Removed the `contentClassName` prop in favor of the
+ * `contentProps`.
  */
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -33,15 +32,14 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * **Server Component**
  *
- * @remarks
- * \@since 6.0.0 Removed the `align` prop.
- * \@since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
+ * @since 6.0.0 Removed the `align` prop.
+ * @since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
  * `beforeAddon` and `afterAddon`.
- * \@since 6.0.0 Removed the `contentClassName` prop in favor of the
- * {@link contentProps}.
- * \@since 6.0.0 No longer uses the `TextIconSpacing` component and instead
+ * @since 6.0.0 Removed the `contentClassName` prop in favor of the
+ * `contentProps`.
+ * @since 6.0.0 No longer uses the `TextIconSpacing` component and instead
  * relies on the CSS `gap` for spacing.
- * \@since 6.0.0 Renders as a `<div>` instead of a `<header>`
+ * @since 6.0.0 Renders as a `<div>` instead of a `<header>`
  */
 export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
   function CardHeader(props, ref) {

package/src/card/CardSubtitle.tsx

@@ -7,7 +7,7 @@ import {
 import { cardSubtitle } from "./styles.js";
 
 /**
- * @remarks \@since 6.0.0 Extends the {@link TypographyProps} and removed the
+ * @since 6.0.0 Extends the {@link TypographyProps} and removed the
  * `noWrap`/`disableSecondaryColor` props.
  */
 export interface CardSubtitleProps extends TypographyProps {
@@ -24,7 +24,7 @@ export interface CardSubtitleProps extends TypographyProps {
 /**
  * **Server Component**
  *
- * @remarks \@since 6.0.0 Extends the {@link Typography} component and removed the
+ * @since 6.0.0 Extends the {@link Typography} component and removed the
  * `noWrap`/`disableSecondaryColor` props.
  */
 export const CardSubtitle = forwardRef<

package/src/card/CardTitle.tsx

@@ -7,7 +7,7 @@ import {
 import { cardTitle } from "./styles.js";
 
 /**
- * @remarks \@since 6,0.0 Extends the {@link TypographyProps} and removed the
+ * @since 6,0.0 Extends the {@link TypographyProps} and removed the
  * `small`/`noWrap` props.
  */
 export interface CardTitleProps extends TypographyProps {
@@ -24,7 +24,7 @@ export interface CardTitleProps extends TypographyProps {
 /**
  * **Server Component**
  *
- * @remarks \@since 6.0.0 Extends the {@Link Typography} component and removed
+ * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */
 export const CardTitle = forwardRef<TypographyHTMLElement, CardTitleProps>(

package/src/card/ClickableCard.tsx

@@ -10,7 +10,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ClickableCardProps extends CardProps {
   onClick: MouseEventHandler<HTMLDivElement>;
@@ -29,8 +29,7 @@ export interface ClickableCardProps extends CardProps {
  * A Small wrapper around the `Card` component that is clickable and has the
  * element interaction enabled (ripples).
  *
- * @example
- * SImple Example
+ * @example Simple Example
  * ```tsx
  * import { CardContent, ClickableCard } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -48,7 +47,7 @@ export interface ClickableCardProps extends CardProps {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(
   function ClickableCard(props, ref) {

package/src/card/styles.ts

@@ -4,7 +4,7 @@ import { cssUtils } from "../cssUtils.js";
 
 const cardStyles = bem("rmd-card");
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardClassNameOptions {
   className?: string;
 
@@ -43,7 +43,7 @@ export interface CardClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function card(options: CardClassNameOptions = {}): string {
   const { className, bordered, raisable, fullWidth, interactable } = options;
@@ -60,7 +60,7 @@ export function card(options: CardClassNameOptions = {}): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardHeaderClassNameOptions {
   className?: string;
 
@@ -72,7 +72,7 @@ export interface CardHeaderClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardHeader(options: CardHeaderClassNameOptions = {}): string {
   const { className, addonAfter = false, addonBefore = false } = options;
@@ -87,13 +87,13 @@ export function cardHeader(options: CardHeaderClassNameOptions = {}): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardHeaderContentClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardHeaderContent(
   options: CardHeaderContentClassNameOptions = {}
@@ -103,13 +103,13 @@ export function cardHeaderContent(
   return cnb(cardStyles("header-content"), className);
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardTitleClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardTitle(options: CardTitleClassNameOptions = {}): string {
   const { className } = options;
@@ -117,13 +117,13 @@ export function cardTitle(options: CardTitleClassNameOptions = {}): string {
   return cnb(cardStyles("title"), className);
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardSubtitleClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardSubtitle(
   options: CardSubtitleClassNameOptions = {}
@@ -137,7 +137,7 @@ export function cardSubtitle(
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardContentClassNameOptions {
   className?: string;
 
@@ -160,13 +160,13 @@ export interface CardContentClassNameOptions {
    * `CardContent` component is the last child.
    *
    * @defaultValue `false`
-   * @remarks \@since 6.0.0 Renamed from `disableExtraPadding`
+   * @since 6.0.0 Renamed from `disableExtraPadding`
    */
   disableLastChildPadding?: boolean;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardContent(options: CardContentClassNameOptions = {}): string {
   const {
@@ -188,13 +188,13 @@ export function cardContent(options: CardContentClassNameOptions = {}): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CardFooterClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function cardFooter(options: CardFooterClassNameOptions = {}): string {
   const { className } = options;

package/src/chip/Chip.tsx

@@ -28,7 +28,7 @@ declare module "react" {
 }
 
 /**
- * @remarks \@since 6.0.0 Renamed the `noninteractive` prop to
+ * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
  */
 export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -86,7 +86,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    * {@link rightAddon} instead of the {@link leftAddon}.
    *
    * @defaultValue `false`
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   selectedIconAfter?: boolean;
 
@@ -101,9 +101,8 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Set this to `true` to render the chip as a `<span>` instead of a button.
    *
-   * @remarks
-   * \@since 2.6.0
-   * \@since 6.0.0 Renamed from `noninteractable`
+   * @since 2.6.0
+   * @since 6.0.0 Renamed from `noninteractable`
    * @defaultValue `false`
    */
   noninteractive?: boolean;
@@ -111,7 +110,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * An optional background color theme to use.
    *
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   backgroundColor?: BackgroundColor;
 
@@ -141,7 +140,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * This will be ignored if {@link disableContentWrap} is `true`.
    *
-   * @remarks \@since 6.0.0
+   * @since 6.0.0
    */
   contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
 
@@ -159,8 +158,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Chip } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -170,8 +168,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * }
  * ```
  *
- * @example
- * Outlined Example
+ * @example Outlined Example
  * ```tsx
  * import { Chip } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -181,8 +178,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * }
  * ```
  *
- * @example
- * Addons Example
+ * @example Addons Example
  * ```tsx
  * import { Avatar, Chip } from "@react-md/core";
  * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
@@ -204,7 +200,7 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Renamed the `noninteractable` prop to
+ * @since 6.0.0 Renamed the `noninteractable` prop to
  * `noninteractive`.
  */
 export const Chip = forwardRef<HTMLButtonElement, ChipProps>(