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

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,6 +134,36 @@ $var-lookup: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @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);
+    }
+
+    @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 {
+      @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);
+    }
+
+    @if not $disable-floating {
+      @include set-var(fab-offset, utils.scrollbar-size());
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-button {

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"}

package/dist/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -44,37 +46,21 @@ $content-padding-bottom: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-card-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-card-color,
-    value: $color,
-  ),
-  secondary-color: (
-    var: --rmd-card-secondary-color,
-    value: null,
-  ),
-);
+$variables: (background-color, color, secondary-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "card 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, "card");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "card var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "card")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -93,6 +79,13 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -108,14 +101,12 @@ $var-lookup: (
       max-width: 100%;
 
       @if not $disable-raisable {
-        @include utils.mouse-only {
-          &--raisable {
-            @include box-shadows.elevation-transition(
-              $raisable-start-elevation,
-              $raisable-end-elevation,
-              "&:hover"
-            );
-          }
+        &--raisable {
+          @include box-shadows.elevation-transition(
+            $raisable-start-elevation,
+            $raisable-end-elevation,
+            "&:hover"
+          );
         }
       }
 
@@ -138,6 +129,12 @@ $var-lookup: (
         }
       }
 
+      @if not $disable-clickable {
+        &--clickable {
+          @include interaction.surface;
+        }
+      }
+
       &__header {
         align-items: center;
         column-gap: $header-spacing;
@@ -149,7 +146,7 @@ $var-lookup: (
         @include typography.text-overflow;
 
         flex: 1 1 auto;
-        min-width: 1;
+        min-width: 0;
       }
 
       // does not require custom styles

package/dist/card/styles.d.ts

@@ -22,6 +22,14 @@ export interface CardClassNameOptions {
      * @defaultValue `false`
      */
     fullWidth?: boolean;
+    /**
+     * Set this to `true` if the card should gain the pointer cursor while
+     * hovering and other interaction styles and not using the `ClickableCard`
+     * component.
+     *
+     * @defaultValue `false`
+     */
+    interactable?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/card/styles.js

@@ -5,11 +5,12 @@ const cardStyles = bem("rmd-card");
 /**
  * @remarks \@since 6.0.0
  */ export function card(options = {}) {
-    const { className, bordered = false, raisable = false, fullWidth = false } = options;
+    const { className, bordered, raisable, fullWidth, interactable } = options;
     return cnb(cardStyles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
+        interactable,
         "full-width": fullWidth
     }), className);
 }
@@ -39,12 +40,14 @@ const cardStyles = bem("rmd-card");
  * @remarks \@since 6.0.0
  */ export function cardSubtitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("subtitle"), className);
+    return cnb(cardStyles("subtitle"), cssUtils({
+        textColor: "text-secondary"
+    }), className);
 }
 /**
  * @remarks \@since 6.0.0
  */ export function cardContent(options = {}) {
-    const { className, disablePadding = false, disableSecondaryColor = false, disableLastChildPadding = false } = options;
+    const { className, disablePadding, disableSecondaryColor, disableLastChildPadding } = options;
     return cnb(cardStyles("content", {
         padded: !disablePadding,
         "padding-bottom": !disableLastChildPadding

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const {\n    className,\n    bordered = false,\n    raisable = false,\n    fullWidth = false,\n  } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"subtitle\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding = false,\n    disableSecondaryColor = false,\n    disableLastChildPadding = false,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AA+BvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EAClB,GAAGJ;IAEJ,OAAOL,IACLG,WAAW;QACTI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvB,cAAcC;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,0BAA0B,KAAK,EAChC,GAAGhB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACAnB,SAAS;QACPqB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}
+{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, fullWidth, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    cardStyles(\"subtitle\"),\n    cssUtils({ textColor: \"text-secondary\" }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","textColor","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AAwCvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGL;IAEnE,OAAOL,IACLG,WAAW;QACTI;QACAI,UAAU,CAACJ;QACXC,UAAU,CAACD,YAAYC;QACvBE;QACA,cAAcD;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,WAAWP,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEO,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGT;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeU,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAR;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASU,kBACdX,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASW,UAAUZ,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASY,aACdb,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,WAAW,aACXD,SAAS;QAAEiB,WAAW;IAAiB,IACvCb;AAEJ;AA8BA;;CAEC,GACD,OAAO,SAASc,YAAYf,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTe,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGlB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBqB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACArB,SAAS;QACPiB,WAAW,CAACG,wBAAwB,mBAAmBG;IACzD,IACAnB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASoB,WAAWrB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}