@react-md/core 6.5.1 → 7.0.0

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, boxStyles } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/box | Box Demos}\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style,\n      className,\n      children,\n      align,\n      justify,\n      stacked,\n      reversed,\n      grid,\n      gridName,\n      gridItemSize,\n      gridColumns,\n      gridAutoRows,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        {...boxStyles({\n          style,\n          className,\n          align,\n          justify,\n          stacked,\n          reversed,\n          grid,\n          gridName,\n          gridItemSize,\n          gridColumns,\n          gridAutoRows,\n          fullWidth,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","boxStyles","Box","props","ref","style","className","children","align","justify","stacked","reversed","grid","gridName","gridItemSize","gridColumns","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,SAAS,QAAQ,cAAc;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,qBACE,KAACmB;QACE,GAAGD,SAAS;QACbjB,KAAKA;QACJ,GAAGH,UAAU;YACZI;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDb;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type BoxOptions, boxStyles } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core/box/Box\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/box | Box Demos}\n * @since 6.0.0\n */\nexport const Box = function Box(props: BoxProps): ReactElement {\n  const {\n    ref,\n    style,\n    className,\n    children,\n    align,\n    justify,\n    stacked,\n    reversed,\n    grid,\n    gridName,\n    gridItemSize,\n    gridColumns,\n    gridAutoRows,\n    fullWidth,\n    disableGap,\n    disableWrap,\n    disablePadding,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      {...boxStyles({\n        style,\n        className,\n        align,\n        justify,\n        stacked,\n        reversed,\n        grid,\n        gridName,\n        gridItemSize,\n        gridColumns,\n        gridAutoRows,\n        fullWidth,\n        disableGap,\n        disableWrap,\n        disablePadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["boxStyles","Box","props","ref","style","className","children","align","justify","stacked","reversed","grid","gridName","gridItemSize","gridColumns","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAEA,SAA0BA,SAAS,QAAQ,cAAc;AASzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGC,GACD,OAAO,MAAMC,MAAM,SAASA,IAAIC,KAAe;IAC7C,MAAM,EACJC,GAAG,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,qBACE,KAACmB;QACE,GAAGD,SAAS;QACbjB,KAAKA;QACJ,GAAGH,UAAU;YACZI;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDb;;AAGP,EAAE"}

package/dist/button/AsyncButton.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent, type ReactNode } from "react";
+import { type MouseEvent, type ReactElement, type ReactNode, type Ref } from "react";
 import { type CircularProgressProps } from "../progress/CircularProgress.js";
 import { type LinearProgressProps } from "../progress/LinearProgress.js";
 import { type PropsWithRef } from "../types.js";
@@ -11,6 +11,7 @@ export type AsyncButtonLoadingType = "circular-before" | "circular-after" | "cir
  * @since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
+    ref?: Ref<HTMLButtonElement>;
     /**
      * @see {@link progressAriaLabelledBy}
      * @defaultValue `"async-button" + useId()`
@@ -154,4 +155,4 @@ export interface AsyncButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
  */
-export declare const AsyncButton: import("react").ForwardRefExoticComponent<AsyncButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AsyncButton(props: AsyncButtonProps): ReactElement;

package/dist/button/AsyncButton.js

@@ -1,7 +1,6 @@
 "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/styles.js";
 import { CircularProgress } from "../progress/CircularProgress.js";
 import { LinearProgress } from "../progress/LinearProgress.js";
@@ -71,8 +70,8 @@ const noop = ()=>{
  *
  * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
- */ export const AsyncButton = /*#__PURE__*/ forwardRef(function AsyncButton(props, ref) {
-    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;
+ */ export function AsyncButton(props) {
+    const { id: propId, ref, 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 } = useAsyncFunction({
         disabled
@@ -151,6 +150,6 @@ const noop = ()=>{
             overlayElement
         ]
     });
-});
+}
 
 //# sourceMappingURL=AsyncButton.js.map

package/dist/button/AsyncButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEvent, type ReactNode, forwardRef } from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.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 { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @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 * @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>;\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>;\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 Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\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 Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\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 * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @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 } = useAsyncFunction({ 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 && loadingChildren !== undefined ? loadingChildren : children}\n        {afterAddon}\n        {overlayElement}\n      </Button>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncFunction","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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"}
+{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/styles.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 { useAsyncFunction } from \"../useAsyncFunction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @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 * @since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n  ref?: Ref<HTMLButtonElement>;\n\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>;\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>;\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 Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\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 Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core/button/AsyncButton\";\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 * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}\n * @since 6.0.0\n */\nexport function AsyncButton(props: AsyncButtonProps): ReactElement {\n  const {\n    id: propId,\n    ref,\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 } = useAsyncFunction({ 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 && loadingChildren !== undefined ? loadingChildren : children}\n      {afterAddon}\n      {overlayElement}\n    </Button>\n  );\n}\n"],"names":["cnb","overlay","CircularProgress","LinearProgress","useAsyncFunction","useEnsuredId","Button","noop","AsyncButton","props","id","propId","ref","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/Button.d.ts

@@ -1,9 +1,10 @@
-import { type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type FloatingActionButtonPosition, type FloatingActionButtonProps } from "./FloatingActionButton.js";
 import { type ButtonClassNameThemeOptions } from "./styles.js";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassNameThemeOptions, ComponentWithRippleProps {
+    ref?: Ref<HTMLButtonElement>;
     /** @defaultValue `"button"` */
     type?: "button" | "reset" | "submit";
     /**
@@ -102,4 +103,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Bu
  *
  * @see {@link https://react-md.dev/components/button | Button Demos}
  */
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Button(props: ButtonProps): ReactElement;

package/dist/button/Button.js

@@ -1,6 +1,5 @@
 "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";
@@ -89,8 +88,8 @@ import { button } from "./styles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/button | Button Demos}
- */ 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, disableRipple, ...remaining } = props;
+ */ export function Button(props) {
+    const { ref, 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, disableRipple, ...remaining } = props;
     const isThemeDisabled = theme === "disabled";
     const ariaDisabled = props["aria-disabled"];
     const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
@@ -136,6 +135,6 @@ import { button } from "./styles.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=Button.js.map

package/dist/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\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 { type ButtonClassNameThemeOptions, button } from \"./styles.js\";\n\nexport interface ButtonProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonClassNameThemeOptions,\n    ComponentWithRippleProps {\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>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\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 Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\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 Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\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 *       <FavoriteIcon />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       <FavoriteIcon />\n *       Content\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button | Button Demos}\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      disableRipple,\n      ...remaining\n    } = props;\n    const isThemeDisabled = theme === \"disabled\";\n    const ariaDisabled = props[\"aria-disabled\"];\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"press\" : undefined,\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","disableRipple","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","mode","undefined","position","aria-disabled"],"mappings":"AAAA;;AAEA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAA2CC,MAAM,QAAQ,cAAc;AAuBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFC,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,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM2B,kBAAkBrB,UAAU;IAClC,MAAMsB,eAAe5B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE6B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDrC,sBAAsB;QACpBsC,MAAMR,gBAAgB,UAAUS;QAChCpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAwB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMhB,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBsC,UAAU/B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG4B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCI,iBAAeT,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DvB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAqB;gBACAC;gBACApB;YACF;;gBAECE;gBACAmB;;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\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 { type ButtonClassNameThemeOptions, button } from \"./styles.js\";\n\nexport interface ButtonProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonClassNameThemeOptions,\n    ComponentWithRippleProps {\n  ref?: Ref<HTMLButtonElement>;\n\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>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\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 Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\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 Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\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 *       <FavoriteIcon />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button\n *       onClick={(event) => {\n *         // do something\n *       }}\n *     >\n *       <FavoriteIcon />\n *       Content\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button | Button Demos}\n */\nexport function Button(props: ButtonProps): ReactElement {\n  const {\n    ref,\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    disableRipple,\n    ...remaining\n  } = props;\n  const isThemeDisabled = theme === \"disabled\";\n  const ariaDisabled = props[\"aria-disabled\"];\n  const { pressed, pressedClassName, ripples, handlers } =\n    useElementInteraction({\n      mode: disableRipple ? \"press\" : undefined,\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"],"names":["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","disableRipple","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","mode","undefined","position","aria-disabled"],"mappings":"AAAA;;AAKA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAA2CC,MAAM,QAAQ,cAAc;AAyBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EACJC,GAAG,EACHC,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,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM2B,kBAAkBrB,UAAU;IAClC,MAAMsB,eAAe5B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE6B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDrC,sBAAsB;QACpBsC,MAAMR,gBAAgB,UAAUS;QAChCpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAwB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMhB,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBsC,UAAU/B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG4B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCI,iBAAeT,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DvB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAqB;gBACAC;gBACApB;YACF;;gBAECE;gBACAmB;;;;AAIT"}

package/dist/button/ButtonUnstyled.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type Ref } 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"`
@@ -6,7 +6,9 @@ import { type ButtonHTMLAttributes } from "react";
  *
  * @since 6.0.0 Renamed from `UnstyledButtonProps`
  */
-export type ButtonUnstyledProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+export interface ButtonUnstyledProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    ref?: Ref<HTMLButtonElement>;
+}
 /**
  * A simple wrapper for a `<button type="button">` that applies the unstyled
  * utility class.
@@ -17,4 +19,4 @@ export type ButtonUnstyledProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>,
  * @see {@link buttonUnstyled}
  * @since 6.0.0 Renamed from `UnstyledButton`
  */
-export declare const ButtonUnstyled: import("react").ForwardRefExoticComponent<ButtonUnstyledProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function ButtonUnstyled(props: ButtonUnstyledProps): ReactElement;

package/dist/button/ButtonUnstyled.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { buttonUnstyled } from "./styles.js";
 /**
  * A simple wrapper for a `<button type="button">` that applies the unstyled
@@ -10,8 +9,8 @@ import { buttonUnstyled } from "./styles.js";
  * @see {@link https://react-md.dev/components/button-unstyled | ButtonUnstyled Demos}
  * @see {@link buttonUnstyled}
  * @since 6.0.0 Renamed from `UnstyledButton`
- */ export const ButtonUnstyled = /*#__PURE__*/ forwardRef(function ButtonUnstyled(props, ref) {
-    const { children, className, ...remaining } = props;
+ */ export function ButtonUnstyled(props) {
+    const { ref, children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("button", {
         ...remaining,
         ref: ref,
@@ -21,6 +20,6 @@ import { buttonUnstyled } from "./styles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=ButtonUnstyled.js.map

package/dist/button/ButtonUnstyled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/ButtonUnstyled.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { buttonUnstyled } from \"./styles.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 * @since 6.0.0 Renamed from `UnstyledButtonProps`\n */\nexport type ButtonUnstyledProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n>;\n\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 https://react-md.dev/components/button-unstyled | ButtonUnstyled Demos}\n * @see {@link buttonUnstyled}\n * @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,SAAoCA,UAAU,QAAQ,QAAQ;AAE9D,SAASC,cAAc,QAAQ,cAAc;AAc7C;;;;;;;;;CASC,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"}
+{"version":3,"sources":["../../src/button/ButtonUnstyled.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { buttonUnstyled } from \"./styles.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 * @since 6.0.0 Renamed from `UnstyledButtonProps`\n */\nexport interface ButtonUnstyledProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\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 https://react-md.dev/components/button-unstyled | ButtonUnstyled Demos}\n * @see {@link buttonUnstyled}\n * @since 6.0.0 Renamed from `UnstyledButton`\n */\nexport function ButtonUnstyled(props: ButtonUnstyledProps): ReactElement {\n  const { ref, children, className, ...remaining } = props;\n\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":["buttonUnstyled","ButtonUnstyled","props","ref","children","className","remaining","button","type"],"mappings":";AAEA,SAASA,cAAc,QAAQ,cAAc;AAgB7C;;;;;;;;;CASC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEnD,qBACE,KAACK;QACE,GAAGD,SAAS;QACbH,KAAKA;QACLK,MAAK;QACLH,WAAWL,eAAe;YAAEK;QAAU;kBAErCD;;AAGP"}

package/dist/button/FloatingActionButton.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 declare module "react" {
     interface CSSProperties {
         "--rmd-fab-offset"?: string | number;
@@ -32,9 +32,10 @@ export interface FloatingActionButtonClassNameOptions {
 export declare function fab(options: FloatingActionButtonClassNameOptions): string;
 /** @since 6.0.0 */
 export interface FloatingActionButtonProps extends HTMLAttributes<HTMLSpanElement>, FloatingActionButtonClassNameOptions {
+    ref?: Ref<HTMLSpanElement>;
 }
 /**
  * @since 6.0.0
  * @internal
  */
-export declare const FloatingActionButton: import("react").ForwardRefExoticComponent<FloatingActionButtonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function FloatingActionButton(props: FloatingActionButtonProps): ReactElement;

package/dist/button/FloatingActionButton.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-fab");
 /**
@@ -21,8 +20,8 @@ const styles = bem("rmd-fab");
 /**
  * @since 6.0.0
  * @internal
- */ export const FloatingActionButton = /*#__PURE__*/ forwardRef(function FloatingActionButton(props, ref) {
-    const { children, className, position = null, absolute = false, ...remaining } = props;
+ */ export function FloatingActionButton(props) {
+    const { ref, children, className, position = null, absolute = false, ...remaining } = props;
     if (!position) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -38,6 +37,6 @@ const styles = bem("rmd-fab");
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=FloatingActionButton.js.map

package/dist/button/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-fab-offset\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-left\"\n  | \"top-right\"\n  | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `null` */\n  position?: FloatingActionButtonPosition;\n\n  /**\n   * @defaultValue `false`\n   */\n  absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n  const { className, position = null, absolute = false } = options;\n\n  return cnb(\n    styles({\n      tl: position === \"top-left\",\n      tr: position === \"top-right\",\n      bl: position === \"bottom-left\",\n      br: position === \"bottom-right\",\n      absolute,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    FloatingActionButtonClassNameOptions {}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n  HTMLSpanElement,\n  FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n  const {\n    children,\n    className,\n    position = null,\n    absolute = false,\n    ...remaining\n  } = props;\n  if (!position) {\n    return <>{children}</>;\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={fab({\n        className,\n        position,\n        absolute,\n      })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAQA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-fab-offset\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-left\"\n  | \"top-right\"\n  | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `null` */\n  position?: FloatingActionButtonPosition;\n\n  /**\n   * @defaultValue `false`\n   */\n  absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n  const { className, position = null, absolute = false } = options;\n\n  return cnb(\n    styles({\n      tl: position === \"top-left\",\n      tr: position === \"top-right\",\n      bl: position === \"bottom-left\",\n      br: position === \"bottom-right\",\n      absolute,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    FloatingActionButtonClassNameOptions {\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function FloatingActionButton(\n  props: FloatingActionButtonProps\n): ReactElement {\n  const {\n    ref,\n    children,\n    className,\n    position = null,\n    absolute = false,\n    ...remaining\n  } = props;\n  if (!position) {\n    return <>{children}</>;\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={fab({\n        className,\n        position,\n        absolute,\n      })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["cnb","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOJ,IACLE,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAUA;;;CAGC,GACD,OAAO,SAASO,qBACdC,KAAgC;IAEhC,MAAM,EACJC,GAAG,EACHC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP"}

package/dist/button/TooltippedButton.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode, type Ref } 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";
@@ -7,6 +7,7 @@ import { type ButtonType } from "./styles.js";
  * @since 6.0.0
  */
 export interface TooltippedButtonProps extends ButtonProps {
+    ref?: Ref<HTMLButtonElement>;
     /** @defaultValue `"icon"` */
     buttonType?: ButtonType;
     /**
@@ -60,4 +61,4 @@ export interface TooltippedButtonProps extends ButtonProps {
  * @see {@link https://react-md.dev/components/button | Button Demos}
  * @since 6.0.0
  */
-export declare const TooltippedButton: import("react").ForwardRefExoticComponent<TooltippedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function TooltippedButton(props: TooltippedButtonProps): ReactElement;

package/dist/button/TooltippedButton.js

@@ -1,6 +1,5 @@
 "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";
@@ -27,8 +26,8 @@ import { Button } from "./Button.js";
  *
  * @see {@link https://react-md.dev/components/button | Button Demos}
  * @since 6.0.0
- */ export const TooltippedButton = /*#__PURE__*/ forwardRef(function TooltippedButton(props, ref) {
-    const { tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, ...remaining } = props;
+ */ export function TooltippedButton(props) {
+    const { ref, tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, ...remaining } = props;
     const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
         ...tooltipOptions,
         disabled: !tooltip || tooltipOptions?.disabled,
@@ -55,6 +54,6 @@ import { Button } from "./Button.js";
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=TooltippedButton.js.map

package/dist/button/TooltippedButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type ProvidedTooltipProps,\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n  useTooltip,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./styles.js\";\n\n/**\n * @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/button/TooltippedButton\";\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 * @see {@link https://react-md.dev/components/button | Button Demos}\n * @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,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    onContextMenu,\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","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,QAAQ,QAAQ;AAEnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SAIEC,UAAU,QACL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAwCvD;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,iCAAmBJ,WAG9B,SAASI,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,MAAM,EACNC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGlB,WAAW;QACtE,GAAGO,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACd;gBACE,GAAGiB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACT;gBAAS,GAAGkB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode, type Ref } from \"react\";\n\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type ProvidedTooltipProps,\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n  useTooltip,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n  ref?: Ref<HTMLButtonElement>;\n\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/button/TooltippedButton\";\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 * @see {@link https://react-md.dev/components/button | Button Demos}\n * @since 6.0.0\n */\nexport function TooltippedButton(props: TooltippedButtonProps): ReactElement {\n  const {\n    ref,\n    tooltip,\n    tooltipProps,\n    tooltipOptions,\n    buttonType = \"icon\",\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    onContextMenu,\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":["Tooltip","useTooltip","Button","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AAIA,SAASA,OAAO,QAA2B,wBAAwB;AACnE,SAIEC,UAAU,QACL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AA0CvD;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,GAAG,EACHC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,MAAM,EACNC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGlB,WAAW;QACtE,GAAGO,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACd;gBACE,GAAGiB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACT;gBAAS,GAAGkB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT"}

package/dist/card/Card.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions } from "./styles.js";
 /**
@@ -6,6 +6,7 @@ import { type CardClassNameOptions } from "./styles.js";
  * deprecated `raiseable` prop
  */
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassNameOptions, Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
+    ref?: Ref<HTMLDivElement>;
     /** @defaultValue `"stretch"` */
     align?: BoxAlignItems;
     /** @defaultValue `"start"` */
@@ -50,4 +51,4 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassName
  * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of
  * `block`/`inline-block`.
  */
-export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card(props: CardProps): ReactElement;

package/dist/card/Card.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Box } from "../box/Box.js";
 import { card } from "./styles.js";
 /**
@@ -40,8 +39,8 @@ import { card } from "./styles.js";
  * @since 6.0.0 Removed the deprecated `raiseable` prop
  * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of
  * `block`/`inline-block`.
- */ export const Card = /*#__PURE__*/ forwardRef(function Card(props, ref) {
-    const { children, className, align = "stretch", justify = "stretch", bordered, raisable, interactable, ...remaining } = props;
+ */ export function Card(props) {
+    const { ref, children, className, align = "stretch", justify = "stretch", bordered, raisable, interactable, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Box, {
         align: align,
         justify: justify,
@@ -59,6 +58,6 @@ import { card } from "./styles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Card.js.map

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      align = \"stretch\",\n      justify = \"stretch\",\n      bordered,\n      raisable,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        align={align}\n        justify={justify}\n        disableWrap\n        {...remaining}\n        stacked\n        disableGap\n        disablePadding\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          interactable,\n        })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAkB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  ref?: Ref<HTMLDivElement>;\n\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport function Card(props: CardProps): ReactElement {\n  const {\n    ref,\n    children,\n    className,\n    align = \"stretch\",\n    justify = \"stretch\",\n    bordered,\n    raisable,\n    interactable,\n    ...remaining\n  } = props;\n\n  return (\n    <Box\n      align={align}\n      justify={justify}\n      disableWrap\n      {...remaining}\n      stacked\n      disableGap\n      disablePadding\n      ref={ref}\n      className={card({\n        className,\n        bordered,\n        raisable,\n        interactable,\n      })}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":["Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAEA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAoB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EACJC,GAAG,EACHC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP"}

package/dist/card/CardContent.d.ts

@@ -1,14 +1,15 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type CardContentClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */
-export declare const CardContent: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardContent: (props: CardContentProps) => ReactElement;

package/dist/card/CardContent.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cardContent } from "./styles.js";
 /**
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
- */ export const CardContent = /*#__PURE__*/ forwardRef(function CardContent(props, ref) {
-    const { children, className, disablePadding, disableSecondaryColor, disableLastChildPadding, ...remaining } = props;
+ */ export const CardContent = function CardContent(props) {
+    const { ref, children, className, disablePadding, disableSecondaryColor, disableLastChildPadding, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
@@ -18,6 +17,6 @@ import { cardContent } from "./styles.js";
         }),
         children: children
     });
-});
+};
 
 //# sourceMappingURL=CardContent.js.map

package/dist/card/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    const {\n      children,\n      className,\n      disablePadding,\n      disableSecondaryColor,\n      disableLastChildPadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cardContent({\n          className,\n          disablePadding,\n          disableSecondaryColor,\n          disableLastChildPadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA2CC,WAAW,QAAQ,cAAc;AAS5E;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = function CardContent(\n  props: CardContentProps\n): ReactElement {\n  const {\n    ref,\n    children,\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cardContent({\n        className,\n        disablePadding,\n        disableSecondaryColor,\n        disableLastChildPadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAEA,SAA2CA,WAAW,QAAQ,cAAc;AAW5E;;;;CAIC,GACD,OAAO,MAAMC,cAAc,SAASA,YAClCC,KAAuB;IAEvB,MAAM,EACJC,GAAG,EACHC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,EAAE"}

package/dist/card/CardFooter.d.ts

@@ -1,7 +1,9 @@
+import { type ReactElement, type Ref } from "react";
 import { type BoxProps } from "../box/Box.js";
 import { type BoxJustifyContent } from "../box/styles.js";
 /** @since 6.0.0 */
 export interface CardFooterProps extends BoxProps {
+    ref?: Ref<HTMLDivElement>;
     /**
      * @defaultValue `"flex-end"`
      */
@@ -14,4 +16,4 @@ export interface CardFooterProps extends BoxProps {
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0
  */
-export declare const CardFooter: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CardFooter(props: CardFooterProps): ReactElement;

package/dist/card/CardFooter.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Box } from "../box/Box.js";
 import { cardFooter } from "./styles.js";
 /**
@@ -8,8 +7,8 @@ import { cardFooter } from "./styles.js";
  *
  * @see {@link https://react-md.dev/components/card | Card Demos}
  * @since 6.0.0
- */ export const CardFooter = /*#__PURE__*/ forwardRef(function CardFooter(props, ref) {
-    const { className, children, justify = "flex-end", ...remaining } = props;
+ */ export function CardFooter(props) {
+    const { ref, className, children, justify = "flex-end", ...remaining } = props;
     return /*#__PURE__*/ _jsx(Box, {
         ...remaining,
         ref: ref,
@@ -19,6 +18,6 @@ import { cardFooter } from "./styles.js";
         justify: justify,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=CardFooter.js.map