@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/button/_button.scss

@@ -11,48 +11,155 @@
 @use "../overlay/overlay";
 @use "../typography/typography";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the text button styles
+// @type boolean
 $disable-text: false !default;
+
+// Set to `true` to disable the icon button styles
+// @type boolean
 $disable-icon: false !default;
+
+// Set to `true` to disable the icon-square button styles
+// @type boolean
 $disable-icon-square: false !default;
+
+// Set to `true` to disable the contained button styles
+// @type boolean
 $disable-contained: false !default;
+
+// Set to `true` to disable the contained with pressed elevation button styles
+// @type boolean
 $disable-contained-pressed-elevation: false !default;
+
+// 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.
+//
+// @type boolean
 $disable-contained-interaction-colors: interaction.$light-surface-base-background-color
   == interaction.$dark-surface-base-background-color !default;
+
+// Set to `true` to disable the floating button styles
+// @type boolean
 $disable-floating: false !default;
+
+// Set to `true` to disable the floating button `position: absolute` styles
+// @type boolean
 $disable-floating-absolute-position: false !default;
+
+// Set to `true` to disable updating the circular progress size within buttons
+// @type boolean
 $disable-circular-progress: progress.$disable-circular !default;
+
+// Set to `true` to disable the async button styles
+// @type boolean
 $disable-async: $disable-circular-progress !default;
+
+// Set to `true` to disable `.rmd-button-unstyled` utility class
+// @type boolean
 $disable-unstyled-utility-class: false !default;
 
+// The default border radius to apply to text buttons
+// @type number
 $text-border-radius: 0.5rem !default;
+
+// The default horizontal padding to apply to text buttons
+// @type number
 $text-horizontal-padding: 1rem !default;
+
+// The default vertical padding to apply to text buttons
+// @type number
 $text-vertical-padding: 0 !default;
+
+// The default min-height to apply to text buttons
+// @type number
 $text-min-height: 2.25rem !default;
+
+// The default min-width to apply to text buttons
+// @type number
 $text-min-width: 4rem !default;
+
+// The default size to set icons that appear as children of text buttons
+// @type number
 $text-icon-size: 1.125rem !default;
 
+// The default border radius to apply to icon buttons
+// @type number
 $icon-border-radius: 50% !default;
+
+// The default border radius to apply to square icon buttons
+// @type number
 $icon-square-border-radius: $text-border-radius !default;
+
+// The default height and width of icon buttons. This default value makes them
+// responsive based on the current font size.
+// @type number
 $icon-size: auto !default;
+
+// The default icon button small size
+// @type number
 $icon-small-size: icon.$size - 0.25rem !default;
+
+// The default icon button large size
+// @type number
 $icon-large-size: icon.$size + 0.25rem !default;
+
+// The default icon button font size which is used to update the total size of
+// the button as well.
+// @type number
 $icon-font-size: icon.$size !default;
+
+// The default padding for icon buttons. The icon button size is determined by
+// adding the padding to the icon size.
+// @type number
 $icon-padding: 0.5em !default;
 
+// The default material design elevation for the contained button theme. This
+// should be a number from 0 - 24.
+// @type number
 $contained-elevation: 2 !default;
+
+// The default material design elevation for the contained button theme while
+// pressed. This should be a number from 0 - 24.
+// @type number
 $contained-pressed-elevation: 4 !default;
+
+// The default background color to apply to contained buttons while the theme is
+// set to clear
+// @type Color
 $clear-contained-background-color: theme.$light-theme-surface-color !default;
+
+// The default text color to apply to contained buttons while the theme is set
+// to clear
+// @type Color
 $clear-contained-color: a11y.contrast-color(
   $clear-contained-background-color
 ) !default;
 
+// The default size for circular progress components that appear as a child of
+// a text button
+// @type number
 $circular-progress-size: icon.get-var(size) !default;
 
+// The default viewport margin for a floating action button
+// @type number
 $floating-margin: 1.5rem !default;
+
+// The default z-index for a floating action button
+// @type number
 $floating-z-index: utils.$temporary-element-z-index !default;
-// set this below the app bar
+
+// The default z-index for an absolute positioned floating action button. This
+// should be a number lower than the `$app-bar-fixed-z-index`.
+// @type number
 $floating-absolute-z-index: 5 !default;
+
+// The default floating action button positions and their margin styles.
+// @type number
 $floating-positions: (
   tl: (
     left: $floating-margin,
@@ -72,6 +179,9 @@ $floating-positions: (
   ),
 ) !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (
   background-color,
   color,
@@ -88,6 +198,9 @@ $variables: (
   fab-offset
 );
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "button");
   @if $fallback {
@@ -97,12 +210,19 @@ $variables: (
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "button")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
@@ -118,9 +238,11 @@ $variables: (
     $box-shadow: $box-shadow
   );
 
-  background-color: transparent;
-  border-width: 0;
-  display: inline-flex;
+  & {
+    background-color: transparent;
+    border-width: 0;
+    display: inline-flex;
+  }
 }
 
 @mixin text-styles {
@@ -134,6 +256,7 @@ $variables: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, transparent);
@@ -164,6 +287,10 @@ $variables: (
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(button, $disable-layer) {
@@ -238,18 +365,6 @@ $variables: (
 
         @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
@@ -262,6 +377,18 @@ $variables: (
               get-var(contained-background-color)
             );
             @include set-var(color, get-var(contained-color));
+
+            @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
+            );
           }
         }
 
@@ -269,7 +396,6 @@ $variables: (
           &--async {
             @include overlay.set-var(background-color, transparent);
             @include progress.set-var(color, currentcolor);
-            // @include progress.set-var(background-color, currentcolor);
           }
 
           &--async-overlay {
@@ -302,25 +428,31 @@ $variables: (
 
           @each $suffix, $styles in $floating-positions {
             &--#{$suffix} {
+              $left: null;
+              $right: null;
+
               @each $property, $value in $styles {
                 @if $property == left {
-                  @include utils.rtl {
-                    left: auto;
-                    right: calc(#{$value} + #{get-var(fab-offset)});
-                  }
+                  $left: auto;
+                  $right: calc(#{$value} + #{get-var(fab-offset)});
 
                   left: $value;
                 } @else if $property == right {
-                  @include utils.rtl {
-                    left: $value;
-                    right: auto;
-                  }
+                  $left: $value;
+                  $right: auto;
 
                   right: calc(#{$value} + #{get-var(fab-offset)});
                 } @else {
                   #{$property}: #{$value};
                 }
               }
+
+              @if $left and $right {
+                @include utils.rtl {
+                  left: $left;
+                  right: $right;
+                }
+              }
             }
           }
         }

package/dist/card/Card.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from "react";
+import { type BoxAlignItems } from "../box/styles.js";
 import { type CardClassNameOptions } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
@@ -12,6 +13,19 @@ declare module "react" {
  * deprecated `raiseable` prop
  */
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassNameOptions {
+    /**
+     * @defaultValue `"stretch"`
+     */
+    align?: BoxAlignItems;
+    /**
+     * @defaultValue `"start"`
+     */
+    justify?: BoxAlignItems;
+    /**
+     * @see {@link BoxOptions.fullWidth}
+     * @defaultValue `false`
+     */
+    fullWidth?: boolean;
 }
 /**
  * @example Simple Example
@@ -50,5 +64,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassName
  * ```
  *
  * @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 declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/card/Card.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Box } from "../box/Box.js";
 import { card } from "./styles.js";
 /**
  * @example Simple Example
@@ -38,16 +39,23 @@ 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, bordered, raisable, fullWidth, interactable, ...remaining } = props;
-    return /*#__PURE__*/ _jsx("div", {
+    const { children, className, align = "stretch", justify = "stretch", bordered, raisable, fullWidth, interactable, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Box, {
         ...remaining,
+        align: align,
+        justify: justify,
+        stacked: true,
+        fullWidth: fullWidth,
+        disableGap: true,
+        disablePadding: true,
         ref: ref,
         className: card({
             className,
             bordered,
             raisable,
-            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 * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {}\n\n/**\n * @example 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 * @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;AAkB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,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"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { Box } from \"../box/Box.js\";\nimport {\n  type BoxAlignItems,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type BoxOptions,\n} from \"../box/styles.js\";\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 * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions {\n  /**\n   * @defaultValue `\"stretch\"`\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"start\"`\n   */\n  justify?: BoxAlignItems;\n\n  /**\n   * @see {@link BoxOptions.fullWidth}\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @example 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 * @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      fullWidth,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        {...remaining}\n        align={align}\n        justify={justify}\n        stacked\n        fullWidth={fullWidth}\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","fullWidth","interactable","remaining","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,gBAAgB;AAMpC,SAASC,IAAI,QAAmC,cAAc;AAkC9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,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,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGV;IAEJ,qBACE,KAACH;QACE,GAAGa,SAAS;QACbN,OAAOA;QACPC,SAASA;QACTM,OAAO;QACPH,WAAWA;QACXI,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAE;QACF;kBAECP;;AAGP,GACA"}

package/dist/card/ClickableCard.d.ts

@@ -1,9 +1,10 @@
 import { type MouseEventHandler } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type CardProps } from "./Card.js";
 /**
  * @since 6.0.0
  */
-export interface ClickableCardProps extends CardProps {
+export interface ClickableCardProps extends CardProps, ComponentWithRippleProps {
     onClick: MouseEventHandler<HTMLDivElement>;
     /**
      * Set this to `true` to disable all click events.

package/dist/card/ClickableCard.js

@@ -32,8 +32,11 @@ const noop = ()=>{
  *
  * @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 { role = "button", disabled, tabIndex = disabled ? undefined : 0, onClick, onKeyDown = noop, className, children: propChildren, disableRipple, ...remaining } = props;
+    const { handlers, ripples } = useElementInteraction({
+        ...remaining,
+        mode: disableRipple ? "none" : undefined
+    });
     const children = useHigherContrastChildren(propChildren);
     return /*#__PURE__*/ _jsxs(Card, {
         ...remaining,

package/dist/card/ClickableCard.js.map

@@ -1 +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 * @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 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 * @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;;;;;;;;;;;;;;;;;;;;;;;CAuBC,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"}
+{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\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 * @since 6.0.0\n */\nexport interface ClickableCardProps\n  extends CardProps,\n    ComponentWithRippleProps {\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 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 * @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      disableRipple,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction({\n      ...remaining,\n      mode: disableRipple ? \"none\" : undefined,\n    });\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","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAgC,QAAQ;AAE3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,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,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,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;;YAECb;YACAK;;;AAGP,GACA"}

package/dist/card/_card.scss

@@ -6,48 +6,116 @@
 @use "../divider/divider";
 @use "../interaction/interaction";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the bordered styles since cards use box-shadow by
+// default.
+// @type boolean
 $disable-bordered: false !default;
+
+// Set to `true` to disable the box-shadow styles if you want to rely on the
+// border styles instead.
+// @type boolean
 $disable-shadowed: false !default;
-$disable-raisable: false !default;
-$disable-full-width: false !default;
+
+// Set to `true` to disable the raisable card styles where hovering a card
+// increases the elevation/box-shadow.
+//
+// @type boolean
+$disable-raisable: $disable-shadowed !default;
+
+// Set to `true` to disable the clickable card styles
+// @type boolean
 $disable-clickable: false !default;
-$disable-content-secondary-color: false !default;
+
+// Set to `true` to disable the styles for adding additional padding to the
+// last `CardContent` that exists
+// @type boolean
 $disable-content-last-child-padding: false !default;
 
+// The default card box-shadow elevation
+// @type number
 $elevation: 2 !default;
+
+// The default card raisable starting box-shadow elevation
+// @type number
 $raisable-start-elevation: 1 !default;
+
+// The default card raisable ending (hovering) box-shadow elevation
+// @type number
 $raisable-end-elevation: 8 !default;
 
+// The background color to use when using the global light theme
+// @type Color
 $light-theme-background-color: theme.theme-get-var(surface-color) !default;
+
+// The background color to use when using the global dark theme
+// @type Color
 $dark-theme-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
   map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
+// The default card background color
+// @type Color
 $background-color: theme.get-default-color(
   $light-theme-background-color,
   $dark-theme-background-color
 ) !default;
+
+// The default card text color
+// @type Color
 $color: theme.theme-get-var(text-primary-color) !default;
 
+// The default border-color for bordered cards
+// @type Color
 $border-color: divider.get-var(color) !default;
+
+// The default border-width for bordered cards
+// @type number
 $border-width: divider.get-var(size) !default;
+
+// The default border-radius for bordered cards
+// @type number
 $border-radius: 0.25rem !default;
 
+// The default padding to apply to `CardHeader`
+// @type number
 $header-padding: 1rem !default;
+
+// The default padding-top to apply to `CardHeader`
+// @type number
 $header-padding-top: 1.5rem !default;
 
+// The default `column-gap` to apply to the `CardHeader`
+// @type number
 $header-spacing: 1rem !default;
 
+// The default padding to apply to the `CardContent`
+// @type number
 $content-padding: 1rem !default;
+
+// The default padding-bottom to apply to the `CardContent` when it is the last
+// child and the {@link $disable-content-last-child-padding} feature flag has
+// not been disabled.
+//
+// @type number
 $content-padding-bottom: 1.5rem !default;
 
+// The default padding to apply to the `CardFooter`
 $footer-padding: 0.5rem !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (background-color, color, secondary-color);
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "card");
   @if $fallback {
@@ -57,28 +125,38 @@ $variables: (background-color, color, secondary-color);
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "card")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @include set-var(background-color, $light-theme-background-color);
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @include set-var(background-color, $dark-theme-background-color);
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -86,6 +164,10 @@ $variables: (background-color, color, secondary-color);
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(card, $disable-layer) {
@@ -98,8 +180,6 @@ $variables: (background-color, color, secondary-color);
         @include use-var(color);
 
         border-radius: $border-radius;
-        display: inline-block;
-        max-width: 100%;
 
         @if not $disable-raisable {
           &--raisable {
@@ -123,13 +203,6 @@ $variables: (background-color, color, secondary-color);
           }
         }
 
-        @if not $disable-full-width {
-          &--full-width {
-            display: block;
-            width: 100%;
-          }
-        }
-
         @if not $disable-clickable {
           &--clickable {
             @include interaction.surface;
@@ -140,7 +213,11 @@ $variables: (background-color, color, secondary-color);
           align-items: center;
           column-gap: $header-spacing;
           display: flex;
-          padding: $header-padding-top $header-padding $header-padding;
+          padding: if(
+            $header-padding == $header-padding-top or not $header-padding-top,
+            $header-padding,
+            $header-padding-top $header-padding $header-padding
+          );
         }
 
         &__header-content {
@@ -159,12 +236,6 @@ $variables: (background-color, color, secondary-color);
         // }
 
         &__content {
-          @if not $disable-content-secondary-color {
-            &--secondary {
-              @include theme.theme-use-var(color, text-secondary-color);
-            }
-          }
-
           @if $content-padding {
             &--padded {
               padding: $content-padding;

package/dist/card/styles.d.ts

@@ -15,13 +15,6 @@ export interface CardClassNameOptions {
      * @defaultValue `false`
      */
     raisable?: boolean;
-    /**
-     * Update the card to have `display: block` and `width: 100%` instead of
-     * `display: inline-block`.
-     *
-     * @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`