@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/dist/button/TooltippedButton.js

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

package/dist/button/TooltippedButton.js.map

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

package/dist/button/_button.scss

@@ -72,77 +72,35 @@ $floating-positions: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-button-background-color,
-    value: transparent,
-  ),
-  color: (
-    var: --rmd-button-color,
-    value: null,
-  ),
-  border-radius: (
-    var: --rmd-button-border-radius,
-    value: null,
-  ),
-  contained-background-color: (
-    var: --rmd-button-contained-background-color,
-    value: $clear-contained-background-color,
-  ),
-  contained-color: (
-    var: --rmd-button-contained-color,
-    value: $clear-contained-color,
-  ),
-  text-horizontal-padding: (
-    var: --rmd-button-text-horizontal-padding,
-    value: $text-horizontal-padding,
-  ),
-  text-vertical-padding: (
-    var: --rmd-button-text-vertical-padding,
-    value: $text-vertical-padding,
-  ),
-  text-min-height: (
-    var: --rmd-button-text-min-height,
-    value: $text-min-height,
-  ),
-  text-min-width: (
-    var: --rmd-button-text-min-width,
-    value: $text-min-width,
-  ),
-  icon-size: (
-    var: --rmd-button-icon-size,
-    value: $icon-size,
-  ),
-  icon-font-size: (
-    var: --rmd-button-icon-font-size,
-    value: $icon-font-size,
-  ),
-  icon-border-radius: (
-    var: --rmd-button-icon-radius,
-    value: $icon-border-radius,
-  ),
-  fab-offset: (
-    var: --rmd-fab-offset,
-    value: utils.scrollbar-size(),
-  ),
+$variables: (
+  background-color,
+  color,
+  border-radius,
+  contained-background-color,
+  contained-color,
+  text-horizontal-padding,
+  text-vertical-padding,
+  text-min-height,
+  text-min-width,
+  icon-size,
+  icon-font-size,
+  icon-border-radius,
+  fab-offset
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "button var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "button var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "button")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -176,160 +134,192 @@ $var-lookup: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-button {
-      @if not $disable-circular-progress {
-        @include progress.set-var(circular-size, $circular-progress-size);
-      }
+    @include set-var(background-color, transparent);
+    @if not $disable-contained {
+      @include set-var(
+        contained-background-color,
+        $clear-contained-background-color
+      );
+      @include set-var(contained-color, $clear-contained-color);
+    }
 
-      @include icon.set-var(color, currentcolor);
-      @include icon.use-var(gap, spacing);
-      @include use-var(background-color);
-      @include use-var(color);
-      @include use-var(border-radius);
-
-      align-items: center;
-      border-width: 0;
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-
-      @if not $disable-text {
-        &--text {
-          @include text-styles;
-        }
-      }
+    @if not $disable-text {
+      @include set-var(text-horizontal-padding, $text-horizontal-padding);
+      @include set-var(text-vertical-padding, $text-vertical-padding);
+      @include set-var(text-min-height, $text-min-height);
+      @include set-var(text-min-width, $text-min-width);
+    }
 
-      @if not $disable-icon {
-        &--icon {
-          @include icon.set-var(size, 1em);
-          @include set-var(border-radius, get-var(icon-border-radius));
-          @include use-var(font-size, icon-font-size);
-          @include use-var(height, icon-size);
-          @include use-var(width, icon-size);
+    @if not $disable-icon {
+      @include set-var(icon-size, $icon-size);
+      @include set-var(icon-font-size, $icon-font-size);
+      @include set-var(icon-border-radius, $icon-border-radius);
+    }
 
-          padding: $icon-padding;
+    @if not $disable-floating {
+      @include set-var(fab-offset, utils.scrollbar-size());
+    }
+  }
+}
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(button, $disable-layer) {
+      .rmd-button {
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
         }
 
-        @if not $disable-icon-square {
-          &--icon-square {
-            @include set-var(icon-border-radius, $icon-square-border-radius);
+        @include icon.set-var(color, currentcolor);
+        @include icon.use-var(gap, spacing);
+        @include use-var(background-color);
+        @include use-var(color);
+        @include use-var(border-radius);
+
+        align-items: center;
+        border-width: 0;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+
+        @if not $disable-text {
+          &--text {
+            @include text-styles;
           }
         }
 
-        @if $icon-small-size {
-          &--small {
-            font-size: $icon-small-size;
+        @if not $disable-icon {
+          &--icon {
+            @include icon.set-var(size, 1em);
+            @include set-var(border-radius, get-var(icon-border-radius));
+            @include use-var(font-size, icon-font-size);
+            @include use-var(height, icon-size);
+            @include use-var(width, icon-size);
+
+            padding: $icon-padding;
           }
-        }
 
-        @if $icon-large-size {
-          &--large {
-            font-size: $icon-large-size;
+          @if not $disable-icon-square {
+            &--icon-square {
+              @include set-var(icon-border-radius, $icon-square-border-radius);
+            }
           }
-        }
-      }
 
-      &--responsive {
-        @include media-queries.tablet-media {
-          @include text-styles;
+          @if $icon-small-size {
+            &--small {
+              font-size: $icon-small-size;
+            }
+          }
 
-          height: auto;
-          width: auto;
+          @if $icon-large-size {
+            &--large {
+              font-size: $icon-large-size;
+            }
+          }
         }
-      }
 
-      &:disabled,
-      &--disabled {
-        @include theme.theme-set-var(outline-color, currentcolor);
-        // this was added for the file input
-        @include interaction.surface-disabled($clickable: false);
-      }
+        &--responsive {
+          @include media-queries.tablet-media {
+            @include text-styles;
 
-      @if not $disable-contained {
-        &--contained {
-          @include box-shadows.elevation-transition(
-            $contained-elevation,
-            if(
-              $disable-contained-pressed-elevation,
-              null,
-              $contained-pressed-elevation
-            ),
-            "&.rmd-button--pressed",
-            $pseudo-before: false,
-            $position-relative: false
-          );
-
-          // contained buttons should _normally_ always force dark background
-          // colors for the interaction states This means use the default light
-          // theme since it is based off of the root background color
-          @if not $disable-contained-interaction-colors {
-            @include interaction.use-light-surface;
+            height: auto;
+            width: auto;
           }
+        }
 
-          @include set-var(
-            background-color,
-            get-var(contained-background-color)
-          );
-          @include set-var(color, get-var(contained-color));
+        &:disabled,
+        &--disabled {
+          @include theme.theme-set-var(outline-color, currentcolor);
+          // this was added for the file input
+          @include interaction.surface-disabled($clickable: false);
         }
-      }
 
-      @if not $disable-async {
-        &--async {
-          @include overlay.set-var(background-color, transparent);
-          @include progress.set-var(color, currentcolor);
-          // @include progress.set-var(background-color, currentcolor);
+        @if not $disable-contained {
+          &--contained {
+            @include box-shadows.elevation-transition(
+              $contained-elevation,
+              if(
+                $disable-contained-pressed-elevation,
+                null,
+                $contained-pressed-elevation
+              ),
+              "&.rmd-button--pressed",
+              $pseudo-before: false,
+              $position-relative: false
+            );
+
+            // contained buttons should _normally_ always force dark background
+            // colors for the interaction states This means use the default light
+            // theme since it is based off of the root background color
+            @if not $disable-contained-interaction-colors {
+              @include interaction.use-light-surface;
+            }
+
+            @include set-var(
+              background-color,
+              get-var(contained-background-color)
+            );
+            @include set-var(color, get-var(contained-color));
+          }
         }
 
-        &--async-overlay {
-          > * {
-            opacity: 0;
+        @if not $disable-async {
+          &--async {
+            @include overlay.set-var(background-color, transparent);
+            @include progress.set-var(color, currentcolor);
+            // @include progress.set-var(background-color, currentcolor);
+          }
+
+          &--async-overlay {
+            > * {
+              opacity: 0;
+            }
           }
         }
       }
-    }
 
-    @if not $disable-unstyled-utility-class {
-      .rmd-button-unstyled {
-        @include unstyled;
+      @if not $disable-unstyled-utility-class {
+        .rmd-button-unstyled {
+          @include unstyled;
+        }
       }
-    }
 
-    @if not $disable-floating {
-      .rmd-fab {
-        position: fixed;
-        z-index: $floating-z-index;
+      @if not $disable-floating {
+        .rmd-fab {
+          position: fixed;
+          z-index: $floating-z-index;
 
-        @if not $disable-floating-absolute-position {
-          &--absolute {
-            @include set-var(fab-offset, 0px);
+          @if not $disable-floating-absolute-position {
+            &--absolute {
+              @include set-var(fab-offset, 0px);
 
-            position: absolute;
-            z-index: $floating-absolute-z-index;
+              position: absolute;
+              z-index: $floating-absolute-z-index;
+            }
           }
-        }
 
-        @each $suffix, $styles in $floating-positions {
-          &--#{$suffix} {
-            @each $property, $value in $styles {
-              @if $property == left {
-                @include utils.rtl {
-                  left: auto;
-                  right: calc(#{$value} + #{get-var(fab-offset)});
-                }
+          @each $suffix, $styles in $floating-positions {
+            &--#{$suffix} {
+              @each $property, $value in $styles {
+                @if $property == left {
+                  @include utils.rtl {
+                    left: auto;
+                    right: calc(#{$value} + #{get-var(fab-offset)});
+                  }
 
-                left: $value;
-              } @else if $property == right {
-                @include utils.rtl {
                   left: $value;
-                  right: auto;
-                }
+                } @else if $property == right {
+                  @include utils.rtl {
+                    left: $value;
+                    right: auto;
+                  }
 
-                right: calc(#{$value} + #{get-var(fab-offset)});
-              } @else {
-                #{$property}: #{$value};
+                  right: calc(#{$value} + #{get-var(fab-offset)});
+                } @else {
+                  #{$property}: #{$value};
+                }
               }
             }
           }

package/dist/card/Card.js

@@ -42,7 +42,7 @@ import { card } from "./styles.js";
  *
  * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
  */ export const Card = /*#__PURE__*/ forwardRef(function Card(props, ref) {
-    const { children, className, bordered = false, raisable = false, fullWidth = false, ...remaining } = props;
+    const { children, className, bordered, raisable, fullWidth, interactable, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
@@ -50,7 +50,8 @@ import { card } from "./styles.js";
             className,
             bordered,
             raisable,
-            fullWidth
+            fullWidth,
+            interactable
         }),
         children: children
     });

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { card, type CardClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0 Extends the {@link CardClassNameOptions}.\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Card,\n *   CardContent,\n *   CardFooter,\n *   CardHeader,\n *   CardTitle,\n *   CardSubtitle,\n *   Typography,\n * } from \"@react-md/core\";\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 * @remarks \\@since 6.0.0 Removed the deprecated `raiseable` prop\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      bordered = false,\n      raisable = false,\n      fullWidth = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          fullWidth,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","card","Card","props","ref","children","className","bordered","raisable","fullWidth","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,IAAI,QAAmC,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { card, type CardClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0 Extends the {@link CardClassNameOptions}.\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Card,\n *   CardContent,\n *   CardFooter,\n *   CardHeader,\n *   CardTitle,\n *   CardSubtitle,\n *   Typography,\n * } from \"@react-md/core\";\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 * @remarks \\@since 6.0.0 Removed the deprecated `raiseable` prop\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      bordered,\n      raisable,\n      fullWidth,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          fullWidth,\n          interactable,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","card","Card","props","ref","children","className","bordered","raisable","fullWidth","interactable","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,IAAI,QAAmC,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbP,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAC;YACAC;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/card/CardContent.js

@@ -8,7 +8,7 @@ import { cardContent } from "./styles.js";
  * \@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 = false, disableSecondaryColor = false, disableLastChildPadding = false, ...remaining } = props;
+    const { children, className, disablePadding, disableSecondaryColor, disableLastChildPadding, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,

package/dist/card/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cardContent, type CardContentClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardContentClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @remarks\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 = false,\n      disableSecondaryColor = false,\n      disableLastChildPadding = false,\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,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,WAAW,QAA0C,cAAc;AAW5E;;;;;;CAMC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,0BAA0B,KAAK,EAC/B,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 { forwardRef, type HTMLAttributes } from \"react\";\nimport { cardContent, type CardContentClassNameOptions } from \"./styles.js\";\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardContentClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @remarks\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,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,WAAW,QAA0C,cAAc;AAW5E;;;;;;CAMC,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"}

package/dist/card/ClickableCard.d.ts

@@ -0,0 +1,42 @@
+import { type MouseEventHandler } from "react";
+import { type CardProps } from "./Card.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ClickableCardProps extends CardProps {
+    onClick: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Set this to `true` to disable all click events.
+     *
+     * Note: Any disabled styling will need to be manually applied.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const ClickableCard: import("react").ForwardRefExoticComponent<ClickableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/card/ClickableCard.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { Card } from "./Card.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export const ClickableCard = /*#__PURE__*/ forwardRef(function ClickableCard(props, ref) {
+    const { role = "button", disabled, tabIndex = disabled ? undefined : 0, onClick, onKeyDown = noop, className, children: propChildren, ...remaining } = props;
+    const { handlers, ripples } = useElementInteraction(remaining);
+    const children = useHigherContrastChildren(propChildren);
+    return /*#__PURE__*/ _jsxs(Card, {
+        ...remaining,
+        ...handlers,
+        "aria-disabled": disabled || undefined,
+        ref: ref,
+        role: role,
+        tabIndex: tabIndex,
+        className: cnb("rmd-card--clickable", className),
+        onClick: (event)=>{
+            if (disabled) {
+                return;
+            }
+            onClick(event);
+        },
+        onKeyDown: (event)=>{
+            onKeyDown(event);
+            if (disabled) {
+                return;
+            }
+            const isSpace = event.key === " ";
+            if (isSpace || event.key === "Enter") {
+                if (isSpace) {
+                    event.preventDefault();
+                }
+                event.currentTarget.click();
+            }
+        },
+        children: [
+            children,
+            ripples
+        ]
+    });
+});
+
+//# sourceMappingURL=ClickableCard.js.map

package/dist/card/ClickableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ClickableCardProps extends CardProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example\n * SImple Example\n * ```tsx\n * import { CardContent, ClickableCard } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction(remaining);\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","remaining","handlers","ripples","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAgC,QAAQ;AAC3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGX;IACJ,MAAM,EAAEY,QAAQ,EAAEC,OAAO,EAAE,GAAGlB,sBAAsBgB;IACpD,MAAMF,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGc,SAAS;QACZ,GAAGC,QAAQ;QACZE,iBAAeX,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACS;YACR,IAAIZ,UAAU;gBACZ;YACF;YAEAG,QAAQS;QACV;QACAR,WAAW,CAACQ;YACVR,UAAUQ;YACV,IAAIZ,UAAU;gBACZ;YACF;YAEA,MAAMa,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECX;YACAI;;;AAGP,GACA"}