@react-md/core 1.0.0-next.0

package/dist/button/AsyncButton.d.ts

@@ -0,0 +1,129 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { type ButtonProps } from "./Button.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type AsyncButtonLoadingType = "circular-before" | "circular-after" | "circular-overlay" | "linear-above" | "linear-below";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface AsyncButtonProps extends ButtonProps {
+    /**
+     * When this is defined and returns a `Promise`, the loading indicator will
+     * display until the promise has resolved.
+     *
+     * @defaultValue `() => {}`
+     */
+    onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;
+    /**
+     * Set this to `true` to manually display a loading spinner.
+     *
+     * @defaultValue `false`
+     */
+    loading?: boolean;
+    /**
+     * - `"circular-overlay"` - Covers and hides the button content with a
+     *   centered circular progress
+     * - `"circular-before"` - Renders a circular progress bar before the button
+     *   content which is useful when rendering an icon before the button text.
+     *   See {@link beforeAddon} as well.
+     * - `"circular-after"` - Renders a circular progress bar before the button
+     *   content which is useful when rendering an icon after the button text.
+     *   See {@link afterAddon} as well.
+     * - `"linear-above"` - Renders a linear progress bar at the top of the button
+     *   while still displaying the button contents. Usually looks good for
+     *   outlined buttons.
+     * - `"linear-below"` - Renders a linear progress bar at the bottom of the
+     *   button while still displaying the button contents. Usually looks good for
+     *   outlined buttons.
+     *
+     * @defaultValue `"circular-overlay"`
+     */
+    loadingType?: AsyncButtonLoadingType;
+    /**
+     * Optional content to display instead of the default `children` while
+     * loading.
+     */
+    loadingChildren?: ReactNode;
+    /**
+     * Set this to `true` to use the `disabled` theme while loading.
+     *
+     * @defaultValue `false`
+     */
+    loadingDisabledTheme?: boolean;
+    /**
+     * This should be used when the {@link loadingType} is set to
+     * `"circular-before"`, an icon should appear before the other content in
+     * the button, and the loading indicator should replace the icon.
+     */
+    beforeAddon?: ReactNode;
+    /**
+     * This should be used when the {@link loadingType} is set to
+     * `"circular-after"`, an icon should appear before the other content in
+     * the button, and the loading indicator should replace the icon.
+     */
+    afterAddon?: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * The async button can be used to render a loading indicator within a button
+ * during an async task. The loading spinner can be shown either by enabling the
+ * `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
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [data, setData] = useState(null);
+ *   return (
+ *     <AsyncButton
+ *       type="submit"
+ *       onClick={async () => {
+ *         const response = await fetch("/my-api");
+ *         const json = await response.json();
+ *         setData(json);
+ *       }}
+ *     >
+ *       Submit
+ *     </AsyncButton>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Manual Loading State
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useMutation } from "@tanstack/query";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { isLoading, mutate } = useMutation({
+ *     mutationFn: (newTodo) => fetch('/todos', {
+ *       method: "POST",
+ *       body: JSON.stringify(newTodo),
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <AsyncButton
+ *       type="submit"
+ *       loading={isLoading}
+ *       onClick={() => {
+ *         mutate({ id: Date.now(), title: "Create example" });
+ *       }}
+ *     >
+ *       Create Todo
+ *     </AsyncButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const AsyncButton: import("react").ForwardRefExoticComponent<AsyncButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/AsyncButton.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { overlay } from "../overlay/overlayStyles.js";
+import { CircularProgress } from "../progress/CircularProgress.js";
+import { LinearProgress } from "../progress/LinearProgress.js";
+import { useAsyncAction } from "../useAsyncAction.js";
+import { Button } from "./Button.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Client Component**
+ *
+ * The async button can be used to render a loading indicator within a button
+ * during an async task. The loading spinner can be shown either by enabling the
+ * `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
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [data, setData] = useState(null);
+ *   return (
+ *     <AsyncButton
+ *       type="submit"
+ *       onClick={async () => {
+ *         const response = await fetch("/my-api");
+ *         const json = await response.json();
+ *         setData(json);
+ *       }}
+ *     >
+ *       Submit
+ *     </AsyncButton>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Manual Loading State
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useMutation } from "@tanstack/query";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { isLoading, mutate } = useMutation({
+ *     mutationFn: (newTodo) => fetch('/todos', {
+ *       method: "POST",
+ *       body: JSON.stringify(newTodo),
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <AsyncButton
+ *       type="submit"
+ *       loading={isLoading}
+ *       onClick={() => {
+ *         mutate({ id: Date.now(), title: "Create example" });
+ *       }}
+ *     >
+ *       Create Todo
+ *     </AsyncButton>
+ *   );
+ * }
+ * ```
+ *
+ * @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 { handleAsync, pending } = useAsyncAction({
+        disabled
+    });
+    const loading = pending || propLoading;
+    let progressTheme = "current-color";
+    if (theme === "clear" || theme === "disabled") {
+        progressTheme = "primary";
+    }
+    const progress = loadingType.includes("linear") ? /*#__PURE__*/ _jsx(LinearProgress, {
+        theme: progressTheme
+    }) : /*#__PURE__*/ _jsx(CircularProgress, {
+        theme: progressTheme
+    });
+    let afterAddon = propAfterAddon;
+    let beforeAddon = propBeforeAddon;
+    let overlayElement;
+    let isOverlayCover = false;
+    switch(loadingType){
+        case "circular-before":
+            beforeAddon = loading ? progress : propBeforeAddon;
+            break;
+        case "circular-after":
+            afterAddon = loading ? progress : propAfterAddon;
+            break;
+        case "circular-overlay":
+        case "linear-above":
+        case "linear-below":
+            {
+                let alignItems = "center";
+                if (loadingType === "linear-above") {
+                    alignItems = "start";
+                } else if (loadingType === "linear-below") {
+                    alignItems = "end";
+                } else {
+                    isOverlayCover = true;
+                }
+                overlayElement = loading && /*#__PURE__*/ _jsx("span", {
+                    className: overlay({
+                        active: true,
+                        visible: true,
+                        absolute: true,
+                        align: alignItems
+                    }),
+                    children: progress
+                });
+                break;
+            }
+    }
+    return /*#__PURE__*/ _jsxs(Button, {
+        ...remaining,
+        "aria-disabled": loading || undefined,
+        ref: ref,
+        disabled: disabled,
+        floating: floating,
+        className: cnb("rmd-button--async", loading && isOverlayCover && "rmd-button--async-overlay", className),
+        theme: loading && loadingDisabledTheme ? "disabled" : theme,
+        themeType: themeType,
+        buttonType: buttonType,
+        onClick: handleAsync((event)=>Promise.resolve(onClick(event))),
+        children: [
+            beforeAddon,
+            loading && typeof loadingChildren !== "undefined" ? loadingChildren : children,
+            afterAddon,
+            overlayElement
+        ]
+    });
+});
+
+//# sourceMappingURL=AsyncButton.js.map

package/dist/button/AsyncButton.js.map

@@ -0,0 +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"}

package/dist/button/Button.d.ts

@@ -0,0 +1,106 @@
+import { type ButtonHTMLAttributes } from "react";
+import { type PropsWithRef } from "../types.js";
+import { type FloatingActionButtonPosition, type FloatingActionButtonProps } from "./FloatingActionButton.js";
+import { type ButtonClassNameThemeOptions } from "./buttonStyles.js";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassNameThemeOptions {
+    /** @defaultValue `"button"` */
+    type?: "button" | "reset" | "submit";
+    /**
+     * The position within the viewport to display the button as a floating action
+     * button.
+     */
+    floating?: FloatingActionButtonPosition;
+    /**
+     * Any additional props to provide the to `FAB` container element when the
+     * `floating` prop is provided
+     */
+    floatingProps?: PropsWithRef<FloatingActionButtonProps, HTMLSpanElement>;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Theme Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       theme="primary"
+ *       themeType="contained"
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Icon Button Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       theme="secondary"
+ *       themeType="outline"
+ *       buttonType="icon"
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       <FavoriteSVGIcon />
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Text Button with icons
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       <FavoriteSVGIcon />
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/Button.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { FloatingActionButton } from "./FloatingActionButton.js";
+import { button } from "./buttonStyles.js";
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Theme Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       theme="primary"
+ *       themeType="contained"
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Icon Button Example
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       theme="secondary"
+ *       themeType="outline"
+ *       buttonType="icon"
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       <FavoriteSVGIcon />
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Text Button with icons
+ * ```tsx
+ * import { Button } from "@react-md/core";
+ * import { FavoriteSVGIcon } from "@react-md/material-icons";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Button
+ *       onClick={(event) => {
+ *         // do something
+ *       }}
+ *     >
+ *       <FavoriteSVGIcon />
+ *       Content
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */ export const Button = /*#__PURE__*/ forwardRef(function Button(props, ref) {
+    const { type = "button", disabled = false, floating = null, floatingProps, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", iconSize, buttonType = floating || iconSize ? "icon" : "text", className, responsive, children: propChildren, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, ...remaining } = props;
+    const isThemeDisabled = theme === "disabled";
+    const ariaDisabled = props["aria-disabled"];
+    const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
+        onBlur,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        onMouseDown,
+        onMouseUp,
+        onMouseLeave,
+        onDragStart,
+        onTouchStart,
+        onTouchEnd,
+        onTouchMove,
+        disabled: disabled || isThemeDisabled || ariaDisabled && ariaDisabled !== "false"
+    });
+    const children = useHigherContrastChildren(propChildren);
+    return /*#__PURE__*/ _jsx(FloatingActionButton, {
+        position: floating,
+        ...floatingProps,
+        children: /*#__PURE__*/ _jsxs("button", {
+            ...remaining,
+            ...isThemeDisabled ? {} : handlers,
+            "aria-disabled": isThemeDisabled || remaining["aria-disabled"],
+            disabled: disabled,
+            ref: ref,
+            type: type,
+            className: button({
+                theme,
+                themeType,
+                buttonType,
+                disabled,
+                responsive,
+                iconSize,
+                pressed,
+                pressedClassName,
+                className
+            }),
+            children: [
+                children,
+                ripples
+            ]
+        })
+    });
+});
+
+//# sourceMappingURL=Button.js.map

package/dist/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  FloatingActionButton,\n  type FloatingActionButtonPosition,\n  type FloatingActionButtonProps,\n} from \"./FloatingActionButton.js\";\nimport { button, type ButtonClassNameThemeOptions } from \"./buttonStyles.js\";\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonClassNameThemeOptions {\n  /** @defaultValue `\"button\"` */\n  type?: \"button\" | \"reset\" | \"submit\";\n\n  /**\n   * The position within the viewport to display the button as a floating action\n   * button.\n   */\n  floating?: FloatingActionButtonPosition;\n\n  /**\n   * Any additional props to provide the to `FAB` container element when the\n   * `floating` prop is provided\n   */\n  floatingProps?: PropsWithRef<FloatingActionButtonProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       Content\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example\n * Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       theme=\"primary\"\n *       themeType=\"contained\"\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       Content\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example\n * Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       theme=\"secondary\"\n *       themeType=\"outline\"\n *       buttonType=\"icon\"\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       <FavoriteSVGIcon />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example\n * Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       <FavoriteSVGIcon />\n *       Content\n *     </Button>\n *   );\n * }\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(props, ref) {\n    const {\n      type = \"button\",\n      disabled = false,\n      floating = null,\n      floatingProps,\n      theme = floating ? \"secondary\" : \"clear\",\n      themeType = floating ? \"contained\" : \"flat\",\n      iconSize,\n      buttonType = floating || iconSize ? \"icon\" : \"text\",\n      className,\n      responsive,\n      children: propChildren,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      ...remaining\n    } = props;\n    const isThemeDisabled = theme === \"disabled\";\n    const ariaDisabled = props[\"aria-disabled\"];\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        onBlur,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled:\n          disabled ||\n          isThemeDisabled ||\n          (ariaDisabled && ariaDisabled !== \"false\"),\n      });\n\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <FloatingActionButton position={floating} {...floatingProps}>\n        <button\n          {...remaining}\n          // when the theme is set to `\"disabled\"`, the event handlers should be\n          // removed so that it behaves like a disabled button. you do not want to\n          // actually set the `disabled` attribute since it will lose keyboard\n          // focus. this is mostly for supporting circular progress bars within\n          // buttons\n          {...(isThemeDisabled ? {} : handlers)}\n          aria-disabled={isThemeDisabled || remaining[\"aria-disabled\"]}\n          disabled={disabled}\n          ref={ref}\n          type={type}\n          className={button({\n            theme,\n            themeType,\n            buttonType,\n            disabled,\n            responsive,\n            iconSize,\n            pressed,\n            pressedClassName,\n            className,\n          })}\n        >\n          {children}\n          {ripples}\n        </button>\n      </FloatingActionButton>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","FloatingActionButton","button","Button","props","ref","type","disabled","floating","floatingProps","theme","themeType","iconSize","buttonType","className","responsive","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","position","aria-disabled"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAASC,MAAM,QAA0C,oBAAoB;AAqB7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFC,GACD,OAAO,MAAMC,uBAASL,WACpB,SAASK,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,WAAW,IAAI,EACfC,aAAa,EACbC,QAAQF,WAAW,cAAc,OAAO,EACxCG,YAAYH,WAAW,cAAc,MAAM,EAC3CI,QAAQ,EACRC,aAAaL,YAAYI,WAAW,SAAS,MAAM,EACnDE,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,kBAAkBpB,UAAU;IAClC,MAAMqB,eAAe3B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE4B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDpC,sBAAsB;QACpBmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAuB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMf,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBmC,UAAU5B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG2B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCE,iBAAeP,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DtB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAoB;gBACAC;gBACAnB;YACF;;gBAECE;gBACAkB;;;;AAIT,GACA"}

package/dist/button/ButtonUnstyled.d.ts

@@ -0,0 +1,21 @@
+import { type ButtonHTMLAttributes } from "react";
+/**
+ * The props for the unstyled button are just all the normal button html
+ * attributes without the `type` since this component forces the `type="button"`
+ * value.
+ *
+ * @remarks \@since 6.0.0 Renamed from `UnstyledButtonProps`
+ */
+export type ButtonUnstyledProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+/**
+ * **Server Component**
+ *
+ * A simple wrapper for a `<button type="button">` that applies the unstyled
+ * utility class.
+ *
+ * Requires the `$disable-unstyled-utility-class` to be `false` to use.
+ *
+ * @see {@link buttonUnstyled}
+ * @remarks \@since 6.0.0 Renamed from `UnstyledButton`
+ */
+export declare const ButtonUnstyled: import("react").ForwardRefExoticComponent<ButtonUnstyledProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/ButtonUnstyled.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { buttonUnstyled } from "./buttonUnstyledStyles.js";
+/**
+ * **Server Component**
+ *
+ * A simple wrapper for a `<button type="button">` that applies the unstyled
+ * utility class.
+ *
+ * Requires the `$disable-unstyled-utility-class` to be `false` to use.
+ *
+ * @see {@link buttonUnstyled}
+ * @remarks \@since 6.0.0 Renamed from `UnstyledButton`
+ */ export const ButtonUnstyled = /*#__PURE__*/ forwardRef(function ButtonUnstyled(props, ref) {
+    const { children, className, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("button", {
+        ...remaining,
+        ref: ref,
+        type: "button",
+        className: buttonUnstyled({
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=ButtonUnstyled.js.map

package/dist/button/ButtonUnstyled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/ButtonUnstyled.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { buttonUnstyled } from \"./buttonUnstyledStyles.js\";\n\n/**\n * The props for the unstyled button are just all the normal button html\n * attributes without the `type` since this component forces the `type=\"button\"`\n * value.\n *\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButtonProps`\n */\nexport type ButtonUnstyledProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n>;\n\n/**\n * **Server Component**\n *\n * A simple wrapper for a `<button type=\"button\">` that applies the unstyled\n * utility class.\n *\n * Requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @see {@link buttonUnstyled}\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButton`\n */\nexport const ButtonUnstyled = forwardRef<\n  HTMLButtonElement,\n  ButtonUnstyledProps\n>(function ButtonUnstyled(props, ref) {\n  const { children, className, ...remaining } = props;\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      className={buttonUnstyled({ className })}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["forwardRef","buttonUnstyled","ButtonUnstyled","props","ref","children","className","remaining","button","type"],"mappings":";AAAA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,cAAc,QAAQ,4BAA4B;AAc3D;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QACE,GAAGD,SAAS;QACbH,KAAKA;QACLK,MAAK;QACLH,WAAWL,eAAe;YAAEK;QAAU;kBAErCD;;AAGP,GAAG"}

package/dist/button/FloatingActionButton.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes } from "react";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-fab-offset"?: string | number;
+    }
+}
+/**
+ * The position within the viewport for the floating action button.
+ *
+ * @remarks \@since 6.0.0 This was renamed from `FABPosition`
+ */
+export type FloatingActionButtonPosition = "bottom-left" | "bottom-right" | "top-left" | "top-right" | null;
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface FloatingActionButtonClassNameOptions {
+    className?: string;
+    /** @defaultValue `null` */
+    position?: FloatingActionButtonPosition;
+    /**
+     * @defaultValue `false`
+     */
+    absolute?: boolean;
+}
+/**
+ * FAB = Floating Action Button
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function fab(options: FloatingActionButtonClassNameOptions): string;
+/** @remarks \@since 6.0.0 */
+export interface FloatingActionButtonProps extends HTMLAttributes<HTMLSpanElement>, FloatingActionButtonClassNameOptions {
+}
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare const FloatingActionButton: import("react").ForwardRefExoticComponent<FloatingActionButtonProps & import("react").RefAttributes<HTMLSpanElement>>;