@react-md/core 1.0.0-next.2 → 1.0.0-next.20

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,160 +287,171 @@ $variables: (
   }
 }
 
-@mixin styles {
+// 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 {
-    .rmd-button {
-      @if not $disable-circular-progress {
-        @include progress.set-var(circular-size, $circular-progress-size);
-      }
+    @include utils.optional-layer(button, $disable-layer) {
+      .rmd-button {
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
+        }
 
-      @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;
+        @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-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 {
+          &--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;
-        }
+            padding: $icon-padding;
+          }
 
-        @if not $disable-icon-square {
-          &--icon-square {
-            @include set-var(icon-border-radius, $icon-square-border-radius);
+          @if not $disable-icon-square {
+            &--icon-square {
+              @include set-var(icon-border-radius, $icon-square-border-radius);
+            }
           }
-        }
 
-        @if $icon-small-size {
-          &--small {
-            font-size: $icon-small-size;
+          @if $icon-small-size {
+            &--small {
+              font-size: $icon-small-size;
+            }
           }
-        }
 
-        @if $icon-large-size {
-          &--large {
-            font-size: $icon-large-size;
+          @if $icon-large-size {
+            &--large {
+              font-size: $icon-large-size;
+            }
           }
         }
-      }
 
-      &--responsive {
-        @include media-queries.tablet-media {
-          @include text-styles;
+        &--responsive {
+          @include media-queries.tablet-media {
+            @include text-styles;
 
-          height: auto;
-          width: auto;
+            height: auto;
+            width: auto;
+          }
         }
-      }
 
-      &:disabled,
-      &--disabled {
-        @include theme.theme-set-var(outline-color, currentcolor);
-        // this was added for the file input
-        @include interaction.surface-disabled($clickable: false);
-      }
+        &: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-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;
-          }
+        @if not $disable-contained {
+          &--contained {
+            // 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));
+            @include set-var(
+              background-color,
+              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
+            );
+          }
         }
-      }
 
-      @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-async {
+          &--async {
+            @include overlay.set-var(background-color, transparent);
+            @include progress.set-var(color, currentcolor);
+          }
 
-        &--async-overlay {
-          > * {
-            opacity: 0;
+          &--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;
+          @each $suffix, $styles in $floating-positions {
+            &--#{$suffix} {
+              $left: null;
+              $right: null;
+
+              @each $property, $value in $styles {
+                @if $property == left {
+                  $left: auto;
+                  $right: calc(#{$value} + #{get-var(fab-offset)});
+
+                  left: $value;
+                } @else if $property == right {
+                  $left: $value;
+                  $right: auto;
+
                   right: calc(#{$value} + #{get-var(fab-offset)});
+                } @else {
+                  #{$property}: #{$value};
                 }
+              }
 
-                left: $value;
-              } @else if $property == right {
+              @if $left and $right {
                 @include utils.rtl {
-                  left: $value;
-                  right: auto;
+                  left: $left;
+                  right: $right;
                 }
-
-                right: calc(#{$value} + #{get-var(fab-offset)});
-              } @else {
-                #{$property}: #{$value};
               }
             }
           }

package/dist/button/buttonStyles.d.ts

@@ -44,7 +44,7 @@ export type ButtonTheme = ThemeColor | "clear" | "disabled";
  * highest contrast ratio with the `background-color`)
  */
 export type ButtonThemeType = "flat" | "outline" | "contained";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ButtonClassNameThemeOptions {
     className?: string;
     /** @defaultValue `false` */
@@ -74,7 +74,7 @@ export interface ButtonClassNameThemeOptions {
     iconSize?: "small" | "normal" | "large";
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {
     /** @defaultValue `false` */
@@ -89,6 +89,6 @@ export interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {
  * @param options - An object containing the themeable button props to generate a
  * button theme className.
  * @returns a string of class names to create an element with a button theme.
- * @remarks \@since 6.0.0 This used to be called `buttonThemeClassNames`.
+ * @since 6.0.0 This used to be called `buttonThemeClassNames`.
  */
 export declare function button(options?: ButtonClassNameOptions): string;

package/dist/button/buttonStyles.js

@@ -10,7 +10,7 @@ const styles = bem("rmd-button");
  * @param options - An object containing the themeable button props to generate a
  * button theme className.
  * @returns a string of class names to create an element with a button theme.
- * @remarks \@since 6.0.0 This used to be called `buttonThemeClassNames`.
+ * @since 6.0.0 This used to be called `buttonThemeClassNames`.
  */ export function button(options = {}) {
     const { theme: propTheme = "clear", themeType = "flat", iconSize, buttonType = "text", disabled: propDisabled = false, responsive, pressed = false, pressedClassName, className } = options;
     const theme = propTheme === "disabled" ? "clear" : propTheme;

package/dist/button/buttonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/buttonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  cssUtils,\n  type OutlineColor,\n  type TextColor,\n  type ThemeColor,\n} from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-button-background-color\"?: string;\n    \"--rmd-button-color\"?: string;\n    \"--rmd-button-border-radius\"?: string | number;\n    \"--rmd-button-contained-background-color\"?: string;\n    \"--rmd-button-contained-color\"?: string;\n    \"--rmd-button-text-horizontal-padding\"?: string | number;\n    \"--rmd-button-text-vertical-padding\"?: string | number;\n    \"--rmd-button-text-min-height\"?: string | number;\n    \"--rmd-button-text-min-width\"?: string | number;\n    \"--rmd-button-icon-size\"?: string | number;\n    \"--rmd-button-icon-radius\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-button\");\n\n/**\n * When this is set to `\"text\"`, the size of the button will be determined by\n * the content and will be more block-like. Icons can still be rendered in\n * `\"text\"` buttons and will have spacing automatically applied between other\n * content in the button.\n *\n * When this is set to `\"icon\"`, the button will be equal height/width and\n * circular.\n */\nexport type ButtonType = \"text\" | \"icon\" | \"icon-square\";\n\n/**\n * One of the valid material design default button themes that can be used. This\n * will update the general look and feel by updating the colors within the\n * button while the `ButtonThemeType` will update the borders or box shadow.\n */\nexport type ButtonTheme = ThemeColor | \"clear\" | \"disabled\";\n\n/**\n * When this is set to `\"flat\"`, the button will have no `background-color`,\n * `border`, and `box-shadow`. It will only set the `color` to the\n * {@link ButtonTheme}.\n *\n * When this is set to `\"outline\"`, the button will have no `background-color`,\n * but gain a `border` and `color` set to the {@link ButtonTheme}.\n *\n * When this is set to `\"contained\"`, the button will set the `background-color`\n * to the {@link ButtonTheme}, add some `box-shadow`, and set the `color` to\n * either `#000` or `#fff`. (The `color` defaults to whichever value has the\n * highest contrast ratio with the `background-color`)\n */\nexport type ButtonThemeType = \"flat\" | \"outline\" | \"contained\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ButtonClassNameThemeOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * @see {@link ButtonTheme} for information about the different types.\n   * @defaultValue `\"text\"`\n   */\n  buttonType?: ButtonType;\n\n  /** @defaultValue `\"clear\"` */\n  theme?: ButtonTheme;\n\n  /**\n   * @see {@link ButtonThemeType} for information about the theming behavior.\n   * @defaultValue `\"flat\"`\n   */\n  themeType?: ButtonThemeType;\n\n  /**\n   * This will display the button as an icon button until the tablet breakpoint\n   * which will then display as a button with an icon.\n   *\n   * @defaultValue `false`\n   */\n  responsive?: boolean;\n\n  /**\n   * @defaultValue `\"normal\"`\n   */\n  iconSize?: \"small\" | \"normal\" | \"large\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * Creates a button theme based on the button theming props. This is really just\n * used so that other elements like clickable `<div>`s or `<input type=\"file\">`\n * can look like buttons.\n *\n * @param options - An object containing the themeable button props to generate a\n * button theme className.\n * @returns a string of class names to create an element with a button theme.\n * @remarks \\@since 6.0.0 This used to be called `buttonThemeClassNames`.\n */\nexport function button(options: ButtonClassNameOptions = {}): string {\n  const {\n    theme: propTheme = \"clear\",\n    themeType = \"flat\",\n    iconSize,\n    buttonType = \"text\",\n    disabled: propDisabled = false,\n    responsive,\n    pressed = false,\n    pressedClassName,\n    className,\n  } = options;\n\n  const theme = propTheme === \"disabled\" ? \"clear\" : propTheme;\n  const disabled = propDisabled || propTheme === \"disabled\";\n  const text = buttonType === \"text\" && !responsive && !iconSize;\n  const icon = !text;\n  const outline = themeType === \"outline\";\n  const contained = themeType === \"contained\";\n  const clear = theme === \"clear\";\n  const isThemed = !disabled && !clear;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  let outlineColor: OutlineColor | undefined;\n  let backgroundColor: ThemeColor | undefined;\n  if (isThemed && !contained) {\n    textColor = theme;\n  } else if (disabled) {\n    textColor = \"text-disabled\";\n  }\n  if (isThemed && contained) {\n    backgroundColor = theme;\n  }\n  if (outline) {\n    outlineColor = clear ? \"greyscale\" : theme;\n  }\n\n  return cnb(\n    styles({\n      text,\n      icon,\n      \"icon-square\": buttonType === \"icon-square\",\n      disabled,\n      contained: !disabled && contained,\n      pressed: contained && pressed,\n      responsive,\n      small: icon && iconSize === \"small\",\n      large: icon && iconSize === \"large\",\n    }),\n    pressedClassName,\n    cssUtils({\n      surface: true,\n      textColor,\n      outlineColor,\n      backgroundColor,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","button","options","theme","propTheme","themeType","iconSize","buttonType","disabled","propDisabled","responsive","pressed","pressedClassName","className","text","icon","outline","contained","clear","isThemed","textColor","outlineColor","backgroundColor","small","large","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,QAIH,iBAAiB;AACxB,SAASC,GAAG,QAAQ,kBAAkB;AAkBtC,MAAMC,SAASD,IAAI;AAgFnB;;;;;;;;;CASC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,OAAOC,YAAY,OAAO,EAC1BC,YAAY,MAAM,EAClBC,QAAQ,EACRC,aAAa,MAAM,EACnBC,UAAUC,eAAe,KAAK,EAC9BC,UAAU,EACVC,UAAU,KAAK,EACfC,gBAAgB,EAChBC,SAAS,EACV,GAAGX;IAEJ,MAAMC,QAAQC,cAAc,aAAa,UAAUA;IACnD,MAAMI,WAAWC,gBAAgBL,cAAc;IAC/C,MAAMU,OAAOP,eAAe,UAAU,CAACG,cAAc,CAACJ;IACtD,MAAMS,OAAO,CAACD;IACd,MAAME,UAAUX,cAAc;IAC9B,MAAMY,YAAYZ,cAAc;IAChC,MAAMa,QAAQf,UAAU;IACxB,MAAMgB,WAAW,CAACX,YAAY,CAACU;IAE/B,IAAIE;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIH,YAAY,CAACF,WAAW;QAC1BG,YAAYjB;IACd,OAAO,IAAIK,UAAU;QACnBY,YAAY;IACd;IACA,IAAID,YAAYF,WAAW;QACzBK,kBAAkBnB;IACpB;IACA,IAAIa,SAAS;QACXK,eAAeH,QAAQ,cAAcf;IACvC;IAEA,OAAON,IACLG,OAAO;QACLc;QACAC;QACA,eAAeR,eAAe;QAC9BC;QACAS,WAAW,CAACT,YAAYS;QACxBN,SAASM,aAAaN;QACtBD;QACAa,OAAOR,QAAQT,aAAa;QAC5BkB,OAAOT,QAAQT,aAAa;IAC9B,IACAM,kBACAd,SAAS;QACP2B,SAAS;QACTL;QACAC;QACAC;IACF,IACAT;AAEJ"}
+{"version":3,"sources":["../../src/button/buttonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type OutlineColor,\n  type TextColor,\n  type ThemeColor,\n  cssUtils,\n} from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-button-background-color\"?: string;\n    \"--rmd-button-color\"?: string;\n    \"--rmd-button-border-radius\"?: string | number;\n    \"--rmd-button-contained-background-color\"?: string;\n    \"--rmd-button-contained-color\"?: string;\n    \"--rmd-button-text-horizontal-padding\"?: string | number;\n    \"--rmd-button-text-vertical-padding\"?: string | number;\n    \"--rmd-button-text-min-height\"?: string | number;\n    \"--rmd-button-text-min-width\"?: string | number;\n    \"--rmd-button-icon-size\"?: string | number;\n    \"--rmd-button-icon-radius\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-button\");\n\n/**\n * When this is set to `\"text\"`, the size of the button will be determined by\n * the content and will be more block-like. Icons can still be rendered in\n * `\"text\"` buttons and will have spacing automatically applied between other\n * content in the button.\n *\n * When this is set to `\"icon\"`, the button will be equal height/width and\n * circular.\n */\nexport type ButtonType = \"text\" | \"icon\" | \"icon-square\";\n\n/**\n * One of the valid material design default button themes that can be used. This\n * will update the general look and feel by updating the colors within the\n * button while the `ButtonThemeType` will update the borders or box shadow.\n */\nexport type ButtonTheme = ThemeColor | \"clear\" | \"disabled\";\n\n/**\n * When this is set to `\"flat\"`, the button will have no `background-color`,\n * `border`, and `box-shadow`. It will only set the `color` to the\n * {@link ButtonTheme}.\n *\n * When this is set to `\"outline\"`, the button will have no `background-color`,\n * but gain a `border` and `color` set to the {@link ButtonTheme}.\n *\n * When this is set to `\"contained\"`, the button will set the `background-color`\n * to the {@link ButtonTheme}, add some `box-shadow`, and set the `color` to\n * either `#000` or `#fff`. (The `color` defaults to whichever value has the\n * highest contrast ratio with the `background-color`)\n */\nexport type ButtonThemeType = \"flat\" | \"outline\" | \"contained\";\n\n/** @since 6.0.0 */\nexport interface ButtonClassNameThemeOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * @see {@link ButtonTheme} for information about the different types.\n   * @defaultValue `\"text\"`\n   */\n  buttonType?: ButtonType;\n\n  /** @defaultValue `\"clear\"` */\n  theme?: ButtonTheme;\n\n  /**\n   * @see {@link ButtonThemeType} for information about the theming behavior.\n   * @defaultValue `\"flat\"`\n   */\n  themeType?: ButtonThemeType;\n\n  /**\n   * This will display the button as an icon button until the tablet breakpoint\n   * which will then display as a button with an icon.\n   *\n   * @defaultValue `false`\n   */\n  responsive?: boolean;\n\n  /**\n   * @defaultValue `\"normal\"`\n   */\n  iconSize?: \"small\" | \"normal\" | \"large\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * Creates a button theme based on the button theming props. This is really just\n * used so that other elements like clickable `<div>`s or `<input type=\"file\">`\n * can look like buttons.\n *\n * @param options - An object containing the themeable button props to generate a\n * button theme className.\n * @returns a string of class names to create an element with a button theme.\n * @since 6.0.0 This used to be called `buttonThemeClassNames`.\n */\nexport function button(options: ButtonClassNameOptions = {}): string {\n  const {\n    theme: propTheme = \"clear\",\n    themeType = \"flat\",\n    iconSize,\n    buttonType = \"text\",\n    disabled: propDisabled = false,\n    responsive,\n    pressed = false,\n    pressedClassName,\n    className,\n  } = options;\n\n  const theme = propTheme === \"disabled\" ? \"clear\" : propTheme;\n  const disabled = propDisabled || propTheme === \"disabled\";\n  const text = buttonType === \"text\" && !responsive && !iconSize;\n  const icon = !text;\n  const outline = themeType === \"outline\";\n  const contained = themeType === \"contained\";\n  const clear = theme === \"clear\";\n  const isThemed = !disabled && !clear;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  let outlineColor: OutlineColor | undefined;\n  let backgroundColor: ThemeColor | undefined;\n  if (isThemed && !contained) {\n    textColor = theme;\n  } else if (disabled) {\n    textColor = \"text-disabled\";\n  }\n  if (isThemed && contained) {\n    backgroundColor = theme;\n  }\n  if (outline) {\n    outlineColor = clear ? \"greyscale\" : theme;\n  }\n\n  return cnb(\n    styles({\n      text,\n      icon,\n      \"icon-square\": buttonType === \"icon-square\",\n      disabled,\n      contained: !disabled && contained,\n      pressed: contained && pressed,\n      responsive,\n      small: icon && iconSize === \"small\",\n      large: icon && iconSize === \"large\",\n    }),\n    pressedClassName,\n    cssUtils({\n      surface: true,\n      textColor,\n      outlineColor,\n      backgroundColor,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","button","options","theme","propTheme","themeType","iconSize","buttonType","disabled","propDisabled","responsive","pressed","pressedClassName","className","text","icon","outline","contained","clear","isThemed","textColor","outlineColor","backgroundColor","small","large","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAIEC,QAAQ,QACH,iBAAiB;AACxB,SAASC,GAAG,QAAQ,kBAAkB;AAkBtC,MAAMC,SAASD,IAAI;AAgFnB;;;;;;;;;CASC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,OAAOC,YAAY,OAAO,EAC1BC,YAAY,MAAM,EAClBC,QAAQ,EACRC,aAAa,MAAM,EACnBC,UAAUC,eAAe,KAAK,EAC9BC,UAAU,EACVC,UAAU,KAAK,EACfC,gBAAgB,EAChBC,SAAS,EACV,GAAGX;IAEJ,MAAMC,QAAQC,cAAc,aAAa,UAAUA;IACnD,MAAMI,WAAWC,gBAAgBL,cAAc;IAC/C,MAAMU,OAAOP,eAAe,UAAU,CAACG,cAAc,CAACJ;IACtD,MAAMS,OAAO,CAACD;IACd,MAAME,UAAUX,cAAc;IAC9B,MAAMY,YAAYZ,cAAc;IAChC,MAAMa,QAAQf,UAAU;IACxB,MAAMgB,WAAW,CAACX,YAAY,CAACU;IAE/B,IAAIE;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIH,YAAY,CAACF,WAAW;QAC1BG,YAAYjB;IACd,OAAO,IAAIK,UAAU;QACnBY,YAAY;IACd;IACA,IAAID,YAAYF,WAAW;QACzBK,kBAAkBnB;IACpB;IACA,IAAIa,SAAS;QACXK,eAAeH,QAAQ,cAAcf;IACvC;IAEA,OAAON,IACLG,OAAO;QACLc;QACAC;QACA,eAAeR,eAAe;QAC9BC;QACAS,WAAW,CAACT,YAAYS;QACxBN,SAASM,aAAaN;QACtBD;QACAa,OAAOR,QAAQT,aAAa;QAC5BkB,OAAOT,QAAQT,aAAa;IAC9B,IACAM,kBACAd,SAAS;QACP2B,SAAS;QACTL;QACAC;QACAC;IACF,IACAT;AAEJ"}

package/dist/button/buttonUnstyledStyles.d.ts

@@ -1,10 +1,10 @@
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ButtonUnstyledClassNameOptions {
     className?: string;
 }
 /**
  * This requires the `$disable-unstyled-utility-class` to be `false` to use.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function buttonUnstyled(options?: ButtonUnstyledClassNameOptions): string;

package/dist/button/buttonUnstyledStyles.js

@@ -2,7 +2,7 @@ import { cnb } from "cnbuilder";
 /**
  * This requires the `$disable-unstyled-utility-class` to be `false` to use.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function buttonUnstyled(options = {}) {
     const { className } = options;
     return cnb("rmd-button-unstyled", className);

package/dist/button/buttonUnstyledStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/buttonUnstyledStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ButtonUnstyledClassNameOptions {\n  className?: string;\n}\n\n/**\n * This requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @remarks \\@since 6.0.0\n */\nexport function buttonUnstyled(\n  options: ButtonUnstyledClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-button-unstyled\", className);\n}\n"],"names":["cnb","buttonUnstyled","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAOhC;;;;CAIC,GACD,OAAO,SAASC,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOF,IAAI,uBAAuBG;AACpC"}
+{"version":3,"sources":["../../src/button/buttonUnstyledStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/** @since 6.0.0 */\nexport interface ButtonUnstyledClassNameOptions {\n  className?: string;\n}\n\n/**\n * This requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @since 6.0.0\n */\nexport function buttonUnstyled(\n  options: ButtonUnstyledClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-button-unstyled\", className);\n}\n"],"names":["cnb","buttonUnstyled","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAOhC;;;;CAIC,GACD,OAAO,SAASC,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOF,IAAI,uBAAuBG;AACpC"}

package/dist/card/Card.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from "react";
+import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
@@ -8,15 +9,17 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0 Extends the {@link CardClassNameOptions}.
+ * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
+ * deprecated `raiseable` prop
  */
-export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassNameOptions {
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassNameOptions, Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
+    /** @defaultValue `"stretch"` */
+    align?: BoxAlignItems;
+    /** @defaultValue `"start"` */
+    justify?: BoxAlignItems;
 }
 /**
- * **Server Component**
- *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import {
  *   Button,
@@ -51,6 +54,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassName
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
+ * @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>>;