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

package/src/avatar/Avatar.tsx

@@ -1,6 +1,12 @@
-import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
+import {
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
+
 import { type PropsWithRef } from "../types.js";
-import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";
+import { type AvatarClassNameOptions, avatar, avatarImage } from "./styles.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -15,9 +21,21 @@ declare module "react" {
 
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
+/**
+ * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
 export interface AvatarProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
+  /**
+   * Since avatars are normally presentational data, they are hidden from screen
+   * readers by default.
+   *
+   * @defaultValue `true`
+   */
+  "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
+
   /**
    * This should be an image `src` attribute to create an avatar from. When this
    * prop is defined, you should not add any children to the avatar as the
@@ -44,7 +62,7 @@ export interface AvatarProps
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}
    *
-   * @remarks \@since 2.2.0
+   * @since 2.2.0
    */
   referrerPolicy?: AvatarImgAttributes["referrerPolicy"];
 
@@ -57,21 +75,18 @@ export interface AvatarProps
    * Note: The values in this object will override the `src`, `alt`, and
    * `referrerPolicy` root level avatar props if they exist on this object.
    *
-   * @remarks \@since 2.2.0
+   * @since 2.2.0
    */
   imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
 }
 
 /**
- * **Server Component**
- *
  * An `Avatar` is generally used to represent objects or people within your app.
  * The avatar can consist of an image, an icon, or some text to display. When
  * the avatar is not an image, different themes can be applied to make the
  * avatar more unique.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Avatar } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -80,10 +95,13 @@ export interface AvatarProps
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   function Avatar(props, ref) {
     const {
+      "aria-hidden": ariaHidden = true,
       className,
       children,
       src,
@@ -96,7 +114,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
       ...remaining
     } = props;
 
-    let img;
+    let img: ReactNode;
     if (src || imgProps) {
       img = (
         <img
@@ -112,8 +130,8 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <span
         {...remaining}
+        aria-hidden={ariaHidden}
         ref={ref}
-        role="presentation"
         className={avatar({
           size,
           color,

package/src/avatar/styles.ts

@@ -1,10 +1,11 @@
 import { cnb } from "cnbuilder";
-import { cssUtils, type ThemeColor } from "../cssUtils.js";
+
+import { type ThemeColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-avatar");
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AvatarClassNameOptions {
   className?: string;
 
@@ -34,7 +35,7 @@ export interface AvatarClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function avatar(options: AvatarClassNameOptions): string {
   const { className, color = "", size, theme } = options;
@@ -46,13 +47,13 @@ export function avatar(options: AvatarClassNameOptions): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AvatarImageClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function avatarImage(options: AvatarImageClassNameOptions = {}): string {
   const { className } = options;

package/src/badge/Badge.tsx

@@ -1,56 +1,16 @@
-import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { cssUtils, type BackgroundColor } from "../cssUtils.js";
-import { bem } from "../utils/bem.js";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-badge-size"?: string | number;
-    "--rmd-badge-offset"?: string | number;
-    "--rmd-badge-offset-top"?: string | number;
-    "--rmd-badge-offset-right"?: string | number;
-  }
-}
-
-const styles = bem("rmd-badge");
-
-/**
- * @remarks \@since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
- * theme colors.
- */
-export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
-
-export interface BadgeClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `""greyscale` */
-  theme?: BadgeTheme;
-}
-
-export function badge(options: BadgeClassNameOptions = {}): string {
-  const { className, theme = "greyscale" } = options;
-  const greyscale = theme === "greyscale";
-  const clear = theme === "clear";
-
-  return cnb(
-    styles({ greyscale }),
-    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),
-    className
-  );
-}
+import { type BadgeTheme, badge } from "./styles.js";
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  /** @defaultValue `""greyscale` */
+  /** @defaultValue `"greyscale"` */
   theme?: BadgeTheme;
 
   children: ReactNode;
 }
 
 /**
- * **Server Component**
- *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -68,8 +28,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
- * @example
- * Within Buttons Example
+ * @example Within Buttons Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -84,7 +43,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `disableNullOnZero` feature since it's
+ * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(

package/src/badge/styles.ts

@@ -0,0 +1,46 @@
+import { cnb } from "cnbuilder";
+
+import { type BackgroundColor, cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-badge-size"?: string | number;
+    "--rmd-badge-offset"?: string | number;
+    "--rmd-badge-offset-top"?: string | number;
+    "--rmd-badge-offset-right"?: string | number;
+  }
+}
+
+const styles = bem("rmd-badge");
+
+/**
+ * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
+ * theme colors.
+ */
+export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
+
+/**
+ * @since 6.0.0
+ */
+export interface BadgeClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `""greyscale` */
+  theme?: BadgeTheme;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function badge(options: BadgeClassNameOptions = {}): string {
+  const { className, theme = "greyscale" } = options;
+  const greyscale = theme === "greyscale";
+  const clear = theme === "clear";
+
+  return cnb(
+    styles({ greyscale }),
+    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),
+    className
+  );
+}

package/src/box/Box.tsx

@@ -1,21 +1,19 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { box, type BoxOptions } from "./styles.js";
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type BoxOptions, box } from "./styles.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
 
 /**
- * **Server Component**
- *
  * The `Box` component is a wrapper around the CSS box model and should solve
  * most of your `flex` and `grid` layout requirements for responsive design.
  * There are pass-through props for all of the box module styling properties
  * available by default.
  *
- * @example
- * Default Styles
+ * @example Default Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -43,8 +41,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @example
- * Default Grid Styles
+ * @example Default Grid Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -72,11 +69,10 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @example
- * Custom Grid
+ * @example Custom Grid
  * ```scss
  * @use "@react-md/core" with (
- *   $grids: (
+ *   $box-grids: (
  *     small: (
  *       min: 5rem,
  *     ),
@@ -107,29 +103,41 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const Box = forwardRef<HTMLDivElement, BoxProps>(
   function Box(props, ref) {
     const {
+      style: propStyle,
       className,
       children,
       align,
-      grid = false,
-      gridName = "",
+      grid,
+      gridName,
       justify,
-      stacked = false,
-      reversed = false,
-      gridColumns = "fit",
-      fullWidth = false,
-      disableWrap = false,
-      disablePadding = false,
+      stacked,
+      reversed,
+      gridColumns,
+      gridAutoRows,
+      fullWidth,
+      disableGap,
+      disableWrap,
+      disablePadding,
       ...remaining
     } = props;
 
+    let style = propStyle;
+    if (typeof gridColumns === "number") {
+      style = {
+        ...propStyle,
+        "--rmd-box-columns": gridColumns,
+      };
+    }
+
     return (
       <div
         {...remaining}
+        style={style}
         ref={ref}
         className={box({
           className,
@@ -138,9 +146,11 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
           stacked,
           gridName,
           gridColumns,
+          gridAutoRows,
           align,
           justify,
           reversed,
+          disableGap,
           disableWrap,
           disablePadding,
         })}

package/src/box/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-box");
@@ -13,7 +14,7 @@ declare module "react" {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxAlignItems =
   | "start"
@@ -24,7 +25,7 @@ export type BoxAlignItems =
   | "stretch";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxJustifyContent =
   | BoxAlignItems
@@ -33,12 +34,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;
@@ -58,6 +59,13 @@ export interface BoxOptions {
    */
   fullWidth?: boolean;
 
+  /**
+   * Set this to `true` to prevent gap between items.
+   *
+   * @defaultValue `false`
+   */
+  disableGap?: boolean;
+
   /**
    * Set this to `true` to set `flex-wrap: nowrap`.
    *
@@ -73,12 +81,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
    *     ),
@@ -102,13 +109,26 @@ export interface BoxOptions {
    */
   gridColumns?: "fit" | "fill" | number;
 
+  /**
+   * Set this to `true` to enable equal height rows within the grid based
+   * on the current `max-height`. This requires the `max-height` to be set
+   * on the `Box` either by:
+   *
+   * - a custom class name that sets `max-height`
+   * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element
+   *
+   * @defaultValue `false`
+   */
+  gridAutoRows?: boolean;
+
   /**
    * @defaultValue `""`
    */
   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,25 +153,28 @@ export interface BoxOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function box(options: BoxOptions = {}): string {
   const {
     className,
     align = "",
-    grid = false,
+    grid,
     gridName = "",
     gridColumns = "fit",
+    gridAutoRows,
     justify = "",
-    stacked = false,
+    stacked,
     reversed,
-    fullWidth = false,
-    disableWrap = false,
-    disablePadding = false,
+    fullWidth,
+    disableGap,
+    disableWrap,
+    disablePadding,
   } = options;
 
   return cnb(
     styles({
+      gap: !disableGap,
       wrap: !disableWrap,
       padded: !disablePadding,
       column: stacked && !reversed,
@@ -159,8 +182,9 @@ export function box(options: BoxOptions = {}): string {
       "column-reverse": stacked && reversed,
       "full-width": fullWidth,
       grid,
-      "grid-fill": gridColumns === "fill",
-      "grid-columns": typeof gridColumns === "number",
+      "grid-fill": grid && gridColumns === "fill",
+      "grid-columns": grid && typeof gridColumns === "number",
+      "grid-auto-rows": grid && gridAutoRows,
       [gridName]: grid && gridName,
       "align-start": align === "start" || align === "flex-start",
       "align-center": align === "center",

package/src/button/AsyncButton.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { forwardRef, type MouseEvent, type ReactNode } from "react";
+import { type MouseEvent, type ReactNode, forwardRef } from "react";
+
 import { type BoxAlignItems } from "../box/styles.js";
 import { overlay } from "../overlay/overlayStyles.js";
 import {
@@ -13,7 +15,7 @@ import {
 } from "../progress/LinearProgress.js";
 import { type ProgressTheme } from "../progress/types.js";
 import { type PropsWithRef } from "../types.js";
-import { useAsyncAction } from "../useAsyncAction.js";
+import { useAsyncFunction } from "../useAsyncFunction.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { Button, type ButtonProps } from "./Button.js";
 
@@ -22,7 +24,7 @@ const noop = (): void => {
 };
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type AsyncButtonLoadingType =
   | "circular-before"
@@ -32,7 +34,7 @@ export type AsyncButtonLoadingType =
   | "linear-below";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
   /**
@@ -47,7 +49,7 @@ export interface AsyncButtonProps extends ButtonProps {
    *
    * @defaultValue `() => {}`
    */
-  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;
 
   /**
    * Set this to `true` to manually display a loading spinner.
@@ -137,8 +139,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 +161,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 +189,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) {
@@ -216,7 +216,7 @@ export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
       ...remaining
     } = props;
     const id = useEnsuredId(propId, "async-button");
-    const { handleAsync, pending } = useAsyncAction({ disabled });
+    const { handleAsync, pending } = useAsyncFunction({ disabled });
     const loading = pending || propLoading;
 
     let progressTheme: ProgressTheme = "current-color";

package/src/button/Button.tsx

@@ -1,5 +1,8 @@
 "use client";
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type PropsWithRef } from "../types.js";
@@ -8,11 +11,12 @@ import {
   type FloatingActionButtonPosition,
   type FloatingActionButtonProps,
 } from "./FloatingActionButton.js";
-import { button, type ButtonClassNameThemeOptions } from "./buttonStyles.js";
+import { type ButtonClassNameThemeOptions, button } from "./buttonStyles.js";
 
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonClassNameThemeOptions {
+    ButtonClassNameThemeOptions,
+    ComponentWithRippleProps {
   /** @defaultValue `"button"` */
   type?: "button" | "reset" | "submit";
 
@@ -32,8 +36,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 +54,7 @@ export interface ButtonProps
  * }
  * ```
  *
- * @example
- * Theme Example
+ * @example Theme Example
  * ```tsx
  * import { Button } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -72,8 +74,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 +96,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";
@@ -141,12 +141,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onTouchStart,
       onTouchEnd,
       onTouchMove,
+      disableRipple,
       ...remaining
     } = props;
     const isThemeDisabled = theme === "disabled";
     const ariaDisabled = props["aria-disabled"];
     const { pressed, pressedClassName, ripples, handlers } =
       useElementInteraction({
+        mode: disableRipple ? "press" : undefined,
         onBlur,
         onClick,
         onKeyDown,