@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/box/_box.scss

@@ -33,41 +33,21 @@ $item-min-size: 8rem !default;
 /// ```
 $grids: () !default;
 
-$var-lookup: (
-  gap: (
-    var: --rmd-box-gap,
-    value: $gap,
-  ),
-  padding: (
-    var: --rmd-box-padding,
-    value: $padding,
-  ),
-  min-size: (
-    var: --rmd-box-item-min-size,
-    value: $item-min-size,
-  ),
-  columns: (
-    var: --rmd-box-columns,
-    value: auto-fit,
-  ),
-);
+$variables: (gap, padding, item-min-size, columns);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "box var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "box");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "box var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "box")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -94,82 +74,93 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-box {
-      @include use-var(gap, gap);
-
-      align-items: $default-align-items;
-      display: flex;
+    @include set-var(gap, $gap);
+    @include set-var(padding, $padding);
+    @include set-var(item-min-size, $item-min-size);
+    @include set-var(columns, auto-fit);
+  }
+}
 
-      &--padded {
-        @include use-var(padding);
-      }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(box, $disable-layer) {
+      .rmd-box {
+        @include use-var(gap, gap);
 
-      &--wrap {
-        flex-wrap: wrap;
-      }
+        align-items: $default-align-items;
+        display: flex;
 
-      &--full-width {
-        width: 100%;
-      }
+        &--padded {
+          @include use-var(padding);
+        }
 
-      @if not $disable-stacked {
-        &--column {
-          flex-direction: column;
+        &--wrap {
+          flex-wrap: wrap;
         }
-      }
 
-      @if not $disable-reversed {
-        &--reverse {
-          flex-direction: row-reverse;
+        &--full-width {
+          width: 100%;
         }
 
         @if not $disable-stacked {
-          &--column-reverse {
-            flex-direction: column-reverse;
+          &--column {
+            flex-direction: column;
           }
         }
-      }
 
-      @each $value in $align-items {
-        &--align-#{$value} {
-          align-items: $value;
-        }
-      }
+        @if not $disable-reversed {
+          &--reverse {
+            flex-direction: row-reverse;
+          }
 
-      @each $value in $justify-content {
-        &--justify-#{utils.str-replace($value, "space-", "")} {
-          justify-content: $value;
+          @if not $disable-stacked {
+            &--column-reverse {
+              flex-direction: column-reverse;
+            }
+          }
         }
-      }
 
-      @if not $disable-grid {
-        &--grid {
-          display: grid;
-          grid-template-columns: repeat(
-            get-var(columns),
-            minmax(get-var(min-size), 1fr)
-          );
+        @each $value in $align-items {
+          &--align-#{$value} {
+            align-items: $value;
+          }
         }
 
-        &--grid-fill {
-          @include set-var(columns, auto-fill);
+        @each $value in $justify-content {
+          &--justify-#{utils.str-replace($value, "space-", "")} {
+            justify-content: $value;
+          }
         }
 
-        @if not $disable-grid-columns {
-          &--grid-columns {
-            @include set-var(min-size, 0);
+        @if not $disable-grid {
+          &--grid {
+            display: grid;
+            grid-template-columns: repeat(
+              get-var(columns),
+              minmax(get-var(item-min-size), 1fr)
+            );
+          }
+
+          &--grid-fill {
+            @include set-var(columns, auto-fill);
           }
-        }
 
-        @each $name, $values in $grids {
-          @include custom-grid-class(
-            "&--#{$name}",
-            $min: map.get($values, min),
-            $gap: map.get($values, gap),
-            $padding: map.get($values, padding)
-          );
+          @if not $disable-grid-columns {
+            &--grid-columns {
+              @include set-var(item-min-size, 0);
+            }
+          }
+
+          @each $name, $values in $grids {
+            @include custom-grid-class(
+              "&--#{$name}",
+              $min: map.get($values, min),
+              $gap: map.get($values, gap),
+              $padding: map.get($values, padding)
+            );
+          }
         }
       }
     }

package/dist/button/AsyncButton.d.ts

@@ -1,4 +1,7 @@
 import { type MouseEvent, type ReactNode } from "react";
+import { type CircularProgressProps } from "../progress/CircularProgress.js";
+import { type LinearProgressProps } from "../progress/LinearProgress.js";
+import { type PropsWithRef } from "../types.js";
 import { type ButtonProps } from "./Button.js";
 /**
  * @remarks \@since 6.0.0
@@ -8,6 +11,11 @@ export type AsyncButtonLoadingType = "circular-before" | "circular-after" | "cir
  * @remarks \@since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
+    /**
+     * @see {@link progressAriaLabelledBy}
+     * @defaultValue `"async-button" + useId()`
+     */
+    id?: string;
     /**
      * When this is defined and returns a `Promise`, the loading indicator will
      * display until the promise has resolved.
@@ -63,6 +71,27 @@ export interface AsyncButtonProps extends ButtonProps {
      * the button, and the loading indicator should replace the icon.
      */
     afterAddon?: ReactNode;
+    /**
+     * An optional label to provide to the progressbar.
+     *
+     * @see {@link progressAriaLabelledBy}
+     */
+    progressAriaLabel?: string;
+    /**
+     * @see {@link id}
+     * @defaultValue `id`
+     */
+    progressAriaLabelledBy?: string;
+    /**
+     * Any additional props to pass to the `CircularProgress` bar when the
+     * {@link loadingType} is one of the circular types.
+     */
+    linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;
+    /**
+     * Any additional props to pass to the `LinearProgress` bar when the
+     * {@link loadingType} is one of the linear types.
+     */
+    circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;
 }
 /**
  * **Client Component**

package/dist/button/AsyncButton.js

@@ -6,6 +6,7 @@ import { overlay } from "../overlay/overlayStyles.js";
 import { CircularProgress } from "../progress/CircularProgress.js";
 import { LinearProgress } from "../progress/LinearProgress.js";
 import { useAsyncAction } from "../useAsyncAction.js";
+import { useEnsuredId } from "../useEnsuredId.js";
 import { Button } from "./Button.js";
 const noop = ()=>{
 // do nothing
@@ -72,7 +73,8 @@ const noop = ()=>{
  *
  * @remarks \@since 6.0.0
  */ export const AsyncButton = /*#__PURE__*/ forwardRef(function AsyncButton(props, ref) {
-    const { onClick = noop, children, floating = null, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", buttonType = floating ? "icon" : "text", className, disabled, loading: propLoading = false, loadingType = "circular-overlay", loadingChildren, loadingDisabledTheme = false, afterAddon: propAfterAddon, beforeAddon: propBeforeAddon, ...remaining } = props;
+    const { id: propId, onClick = noop, children, floating = null, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", buttonType = floating ? "icon" : "text", className, disabled, loading: propLoading = false, loadingType = "circular-overlay", loadingChildren, loadingDisabledTheme = false, afterAddon: propAfterAddon, beforeAddon: propBeforeAddon, linearProgressProps, circularProgressProps, progressAriaLabel, progressAriaLabelledBy: propProgressAriaLabelledBy, ...remaining } = props;
+    const id = useEnsuredId(propId, "async-button");
     const { handleAsync, pending } = useAsyncAction({
         disabled
     });
@@ -81,9 +83,19 @@ const noop = ()=>{
     if (theme === "clear" || theme === "disabled") {
         progressTheme = "primary";
     }
+    let progressAriaLabelledBy = propProgressAriaLabelledBy;
+    if (!progressAriaLabel && !linearProgressProps?.["aria-label"] && !linearProgressProps?.["aria-labelledby"] && !circularProgressProps?.["aria-label"] && !circularProgressProps?.["aria-labelledby"]) {
+        progressAriaLabelledBy = id;
+    }
     const progress = loadingType.includes("linear") ? /*#__PURE__*/ _jsx(LinearProgress, {
+        "aria-label": progressAriaLabel,
+        "aria-labelledby": progressAriaLabelledBy,
+        ...linearProgressProps,
         theme: progressTheme
     }) : /*#__PURE__*/ _jsx(CircularProgress, {
+        "aria-label": progressAriaLabel,
+        "aria-labelledby": progressAriaLabelledBy,
+        ...circularProgressProps,
         theme: progressTheme
     });
     let afterAddon = propAfterAddon;
@@ -124,6 +136,7 @@ const noop = ()=>{
     return /*#__PURE__*/ _jsxs(Button, {
         ...remaining,
         "aria-disabled": loading || undefined,
+        id: id,
         ref: ref,
         disabled: disabled,
         floating: floating,

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport { CircularProgress } from \"../progress/CircularProgress.js\";\nimport { LinearProgress } from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      ...remaining\n    } = props;\n    const { handleAsync, pending } = useAsyncAction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress theme={progressTheme} />\n    ) : (\n      <CircularProgress theme={progressTheme} />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","Button","noop","AsyncButton","props","ref","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","remaining","handleAsync","pending","progressTheme","progress","includes","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAyC,QAAQ;AAEpE,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SAASC,gBAAgB,QAAQ,kCAAkC;AACnE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA+EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcP,WACzB,SAASO,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,UAAUJ,IAAI,EACdK,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5B,GAAGC,WACJ,GAAGnB;IACJ,MAAM,EAAEoB,WAAW,EAAEC,OAAO,EAAE,GAAGzB,eAAe;QAAEa;IAAS;IAC3D,MAAMC,UAAUW,WAAWV;IAE3B,IAAIW,gBAA+B;IACnC,IAAIjB,UAAU,WAAWA,UAAU,YAAY;QAC7CiB,gBAAgB;IAClB;IAEA,MAAMC,WAAWX,YAAYY,QAAQ,CAAC,0BACpC,KAAC7B;QAAeU,OAAOiB;uBAEvB,KAAC5B;QAAiBW,OAAOiB;;IAG3B,IAAIP,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIO;IACJ,IAAIC,iBAAiB;IACrB,OAAQd;QACN,KAAK;YACHK,cAAcP,UAAUa,WAAWL;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUa,WAAWP;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIW,aAA4B;gBAChC,IAAIf,gBAAgB,gBAAgB;oBAClCe,aAAa;gBACf,OAAO,IAAIf,gBAAgB,gBAAgB;oBACzCe,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBf,yBACf,KAACkB;oBACCpB,WAAWf,QAAQ;wBACjBoC,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECJ;;gBAGL;YACF;IACF;IAEA,qBACE,MAAC1B;QACE,GAAGsB,SAAS;QACbc,iBAAevB,WAAWwB;QAC1BjC,KAAKA;QACLQ,UAAUA;QACVL,UAAUA;QACVI,WAAWjB,IACT,qBACAmB,WAAWgB,kBAAkB,6BAC7BlB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASkB,YAAY,CAACe,QAAUC,QAAQC,OAAO,CAACnC,QAAQiC;;YAEvDlB;YACAP,WAAW,OAAOG,oBAAoB,cACnCA,kBACAV;YACHY;YACAU;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport {\n  CircularProgress,\n  type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n  LinearProgress,\n  type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n  | \"circular-before\"\n  | \"circular-after\"\n  | \"circular-overlay\"\n  | \"linear-above\"\n  | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  /**\n   * @see {@link progressAriaLabelledBy}\n   * @defaultValue `\"async-button\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * When this is defined and returns a `Promise`, the loading indicator will\n   * display until the promise has resolved.\n   *\n   * @defaultValue `() => {}`\n   */\n  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n  /**\n   * Set this to `true` to manually display a loading spinner.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * - `\"circular-overlay\"` - Covers and hides the button content with a\n   *   centered circular progress\n   * - `\"circular-before\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon before the button text.\n   *   See {@link beforeAddon} as well.\n   * - `\"circular-after\"` - Renders a circular progress bar before the button\n   *   content which is useful when rendering an icon after the button text.\n   *   See {@link afterAddon} as well.\n   * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n   *   while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n   *   button while still displaying the button contents. Usually looks good for\n   *   outlined buttons.\n   *\n   * @defaultValue `\"circular-overlay\"`\n   */\n  loadingType?: AsyncButtonLoadingType;\n\n  /**\n   * Optional content to display instead of the default `children` while\n   * loading.\n   */\n  loadingChildren?: ReactNode;\n\n  /**\n   * Set this to `true` to use the `disabled` theme while loading.\n   *\n   * @defaultValue `false`\n   */\n  loadingDisabledTheme?: boolean;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-before\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * This should be used when the {@link loadingType} is set to\n   * `\"circular-after\"`, an icon should appear before the other content in\n   * the button, and the loading indicator should replace the icon.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * An optional label to provide to the progressbar.\n   *\n   * @see {@link progressAriaLabelledBy}\n   */\n  progressAriaLabel?: string;\n\n  /**\n   * @see {@link id}\n   * @defaultValue `id`\n   */\n  progressAriaLabelledBy?: string;\n\n  /**\n   * Any additional props to pass to the `CircularProgress` bar when the\n   * {@link loadingType} is one of the circular types.\n   */\n  linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;\n\n  /**\n   * Any additional props to pass to the `LinearProgress` bar when the\n   * {@link loadingType} is one of the linear types.\n   */\n  circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [data, setData] = useState(null);\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       onClick={async () => {\n *         const response = await fetch(\"/my-api\");\n *         const json = await response.json();\n *         setData(json);\n *       }}\n *     >\n *       Submit\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { isLoading, mutate } = useMutation({\n *     mutationFn: (newTodo) => fetch('/todos', {\n *       method: \"POST\",\n *       body: JSON.stringify(newTodo),\n *     }),\n *   });\n *\n *   return (\n *     <AsyncButton\n *       type=\"submit\"\n *       loading={isLoading}\n *       onClick={() => {\n *         mutate({ id: Date.now(), title: \"Create example\" });\n *       }}\n *     >\n *       Create Todo\n *     </AsyncButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n  function AsyncButton(props, ref) {\n    const {\n      id: propId,\n      onClick = noop,\n      children,\n      floating = null,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      buttonType = floating ? \"icon\" : \"text\",\n      className,\n      disabled,\n      loading: propLoading = false,\n      loadingType = \"circular-overlay\",\n      loadingChildren,\n      loadingDisabledTheme = false,\n      afterAddon: propAfterAddon,\n      beforeAddon: propBeforeAddon,\n      linearProgressProps,\n      circularProgressProps,\n      progressAriaLabel,\n      progressAriaLabelledBy: propProgressAriaLabelledBy,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"async-button\");\n    const { handleAsync, pending } = useAsyncAction({ disabled });\n    const loading = pending || propLoading;\n\n    let progressTheme: ProgressTheme = \"current-color\";\n    if (theme === \"clear\" || theme === \"disabled\") {\n      progressTheme = \"primary\";\n    }\n\n    let progressAriaLabelledBy = propProgressAriaLabelledBy;\n    if (\n      !progressAriaLabel &&\n      !linearProgressProps?.[\"aria-label\"] &&\n      !linearProgressProps?.[\"aria-labelledby\"] &&\n      !circularProgressProps?.[\"aria-label\"] &&\n      !circularProgressProps?.[\"aria-labelledby\"]\n    ) {\n      progressAriaLabelledBy = id;\n    }\n\n    const progress = loadingType.includes(\"linear\") ? (\n      <LinearProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...linearProgressProps}\n        theme={progressTheme}\n      />\n    ) : (\n      <CircularProgress\n        aria-label={progressAriaLabel}\n        aria-labelledby={progressAriaLabelledBy as string}\n        {...circularProgressProps}\n        theme={progressTheme}\n      />\n    );\n\n    let afterAddon = propAfterAddon;\n    let beforeAddon = propBeforeAddon;\n    let overlayElement: ReactNode;\n    let isOverlayCover = false;\n    switch (loadingType) {\n      case \"circular-before\":\n        beforeAddon = loading ? progress : propBeforeAddon;\n        break;\n      case \"circular-after\":\n        afterAddon = loading ? progress : propAfterAddon;\n        break;\n      case \"circular-overlay\":\n      case \"linear-above\":\n      case \"linear-below\": {\n        let alignItems: BoxAlignItems = \"center\";\n        if (loadingType === \"linear-above\") {\n          alignItems = \"start\";\n        } else if (loadingType === \"linear-below\") {\n          alignItems = \"end\";\n        } else {\n          isOverlayCover = true;\n        }\n\n        overlayElement = loading && (\n          <span\n            className={overlay({\n              active: true,\n              visible: true,\n              absolute: true,\n              align: alignItems,\n            })}\n          >\n            {progress}\n          </span>\n        );\n        break;\n      }\n    }\n\n    return (\n      <Button\n        {...remaining}\n        aria-disabled={loading || undefined}\n        id={id}\n        ref={ref}\n        disabled={disabled}\n        floating={floating}\n        className={cnb(\n          \"rmd-button--async\",\n          loading && isOverlayCover && \"rmd-button--async-overlay\",\n          className\n        )}\n        theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n        themeType={themeType}\n        buttonType={buttonType}\n        onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n      >\n        {beforeAddon}\n        {loading && typeof loadingChildren !== \"undefined\"\n          ? loadingChildren\n          : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"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"}

package/dist/button/TooltippedButton.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type ProvidedTooltipProps, type TooltipOptions, type TooltippedElementEventHandlers } from "../tooltip/useTooltip.js";
+import { type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+    /** @defaultValue `"icon"` */
+    buttonType?: ButtonType;
+    /**
+     * The tooltip children to render. When this is falsey, the tooltip event
+     * listeners will not be enabled and the tooltip will never display.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Any additional props to pass to the `Tooltip` component (normally styling
+     * props).
+     */
+    tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+    /**
+     * Any additional tooltip options to pass to {@link useTooltip}. The most
+     * common options would be:
+     *
+     * ```ts
+     * tooltipOptions={{
+     *   overflowOnly: true,
+     *
+     *   // whatever values you want for these
+     *   hoverTimeout: 0,
+     *   leaveTimeout: 150,
+     *   defaultPosition: "left",
+     * }}
+     * ```
+     */
+    tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const TooltippedButton: import("react").ForwardRefExoticComponent<TooltippedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/TooltippedButton.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { useTooltip } from "../tooltip/useTooltip.js";
+import { Button } from "./Button.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export const TooltippedButton = /*#__PURE__*/ forwardRef(function TooltippedButton(props, ref) {
+    const { tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur = noop, onFocus = noop, onMouseEnter = noop, onMouseLeave = noop, onTouchStart = noop, onTouchEnd = noop, onContextMenu = noop, ...remaining } = props;
+    const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
+        ...tooltipOptions,
+        disabled: !tooltip || tooltipOptions?.disabled,
+        onBlur,
+        onFocus,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchEnd,
+        onTouchStart,
+        onContextMenu
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                ...elementProps,
+                ...remaining,
+                ref: ref,
+                buttonType: buttonType
+            }),
+            /*#__PURE__*/ _jsx(Tooltip, {
+                ...providedTooltipProps,
+                ...tooltipProps,
+                children: tooltip
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TooltippedButton.js.map

package/dist/button/TooltippedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  useTooltip,\n  type ProvidedTooltipProps,\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./buttonStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n  /** @defaultValue `\"icon\"` */\n  buttonType?: ButtonType;\n\n  /**\n   * The tooltip children to render. When this is falsey, the tooltip event\n   * listeners will not be enabled and the tooltip will never display.\n   */\n  tooltip?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `Tooltip` component (normally styling\n   * props).\n   */\n  tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;\n\n  /**\n   * Any additional tooltip options to pass to {@link useTooltip}. The most\n   * common options would be:\n   *\n   * ```ts\n   * tooltipOptions={{\n   *   overflowOnly: true,\n   *\n   *   // whatever values you want for these\n   *   hoverTimeout: 0,\n   *   leaveTimeout: 150,\n   *   defaultPosition: \"left\",\n   * }}\n   * ```\n   */\n  tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;\n}\n\n/**\n * **Client Component**\n *\n * A simple wrapper around the `Button` and `Tooltip` components to dynamically\n * add tooltips to buttons. The `buttonType` will default to `icon` instead of\n * `text`.\n *\n * @example\n * ```tsx\n * import { TooltippedButton } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <TooltippedButton tooltip=\"I am a tooltip!\" aria-label=\"Favorite\">\n *       <FavoriteIcon />\n *     </TooltippedButton>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const TooltippedButton = forwardRef<\n  HTMLButtonElement,\n  TooltippedButtonProps\n>(function TooltippedButton(props, ref) {\n  const {\n    tooltip,\n    tooltipProps,\n    tooltipOptions,\n    buttonType = \"icon\",\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    ...remaining\n  } = props;\n  const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({\n    ...tooltipOptions,\n    disabled: !tooltip || tooltipOptions?.disabled,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchEnd,\n    onTouchStart,\n    onContextMenu,\n  });\n\n  return (\n    <>\n      <Button\n        {...elementProps}\n        {...remaining}\n        ref={ref}\n        buttonType={buttonType}\n      />\n      <Tooltip {...providedTooltipProps} {...tooltipProps}>\n        {tooltip}\n      </Tooltip>\n    </>\n  );\n});\n"],"names":["forwardRef","Tooltip","useTooltip","Button","noop","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SACEC,UAAU,QAIL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAGvD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,SAASR,IAAI,EACbS,UAAUT,IAAI,EACdU,eAAeV,IAAI,EACnBW,eAAeX,IAAI,EACnBY,eAAeZ,IAAI,EACnBa,aAAab,IAAI,EACjBc,gBAAgBd,IAAI,EACpB,GAAGe,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGnB,WAAW;QACtE,GAAGQ,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACf;gBACE,GAAGkB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACV;gBAAS,GAAGmB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}