@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/button/TooltippedButton.js

@@ -4,9 +4,6 @@ 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**
  *
@@ -16,7 +13,7 @@ const noop = ()=>{
  *
  * @example
  * ```tsx
- * import { TooltippedButton } from "@react-md/core";
+ * import { TooltippedButton } from "@react-md/core/button/TooltippedButton";
  * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
  *
  * export default function Example(): ReactElement {
@@ -28,9 +25,10 @@ const noop = ()=>{
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/button | Button Demos}
+ * @since 6.0.0
  */ export const TooltippedButton = /*#__PURE__*/ forwardRef(function TooltippedButton(props, ref) {
-    const { tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur = noop, onFocus = noop, onMouseEnter = noop, onMouseLeave = noop, onTouchStart = noop, onTouchEnd = noop, onContextMenu = noop, ...remaining } = props;
+    const { tooltip, tooltipProps, tooltipOptions, buttonType = "icon", onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, ...remaining } = props;
     const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
         ...tooltipOptions,
         disabled: !tooltip || tooltipOptions?.disabled,

package/dist/button/TooltippedButton.js.map

@@ -1 +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"}
+{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type ProvidedTooltipProps,\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n  useTooltip,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n  /** @defaultValue `\"icon\"` */\n  buttonType?: ButtonType;\n\n  /**\n   * The tooltip children to render. When this is falsey, the tooltip event\n   * listeners will not be enabled and the tooltip will never display.\n   */\n  tooltip?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `Tooltip` component (normally styling\n   * props).\n   */\n  tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;\n\n  /**\n   * Any additional tooltip options to pass to {@link useTooltip}. The most\n   * common options would be:\n   *\n   * ```ts\n   * tooltipOptions={{\n   *   overflowOnly: true,\n   *\n   *   // whatever values you want for these\n   *   hoverTimeout: 0,\n   *   leaveTimeout: 150,\n   *   defaultPosition: \"left\",\n   * }}\n   * ```\n   */\n  tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;\n}\n\n/**\n * **Client Component**\n *\n * A simple wrapper around the `Button` and `Tooltip` components to dynamically\n * add tooltips to buttons. The `buttonType` will default to `icon` instead of\n * `text`.\n *\n * @example\n * ```tsx\n * import { TooltippedButton } from \"@react-md/core/button/TooltippedButton\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <TooltippedButton tooltip=\"I am a tooltip!\" aria-label=\"Favorite\">\n *       <FavoriteIcon />\n *     </TooltippedButton>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/button | Button Demos}\n * @since 6.0.0\n */\nexport const TooltippedButton = forwardRef<\n  HTMLButtonElement,\n  TooltippedButtonProps\n>(function TooltippedButton(props, ref) {\n  const {\n    tooltip,\n    tooltipProps,\n    tooltipOptions,\n    buttonType = \"icon\",\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    onContextMenu,\n    ...remaining\n  } = props;\n  const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({\n    ...tooltipOptions,\n    disabled: !tooltip || tooltipOptions?.disabled,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    onTouchEnd,\n    onTouchStart,\n    onContextMenu,\n  });\n\n  return (\n    <>\n      <Button\n        {...elementProps}\n        {...remaining}\n        ref={ref}\n        buttonType={buttonType}\n      />\n      <Tooltip {...providedTooltipProps} {...tooltipProps}>\n        {tooltip}\n      </Tooltip>\n    </>\n  );\n});\n"],"names":["forwardRef","Tooltip","useTooltip","Button","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,QAAQ,QAAQ;AAEnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SAIEC,UAAU,QACL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAwCvD;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,iCAAmBJ,WAG9B,SAASI,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,MAAM,EACNC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGlB,WAAW;QACtE,GAAGO,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACd;gBACE,GAAGiB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACT;gBAAS,GAAGkB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}

package/dist/button/_button.scss

@@ -1,3 +1,7 @@
+////
+/// @group button
+////
+
 @use "sass:list";
 @use "sass:map";
 @use "../utils";
@@ -11,48 +15,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 +183,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 +202,9 @@ $variables: (
   fab-offset
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - 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,16 +214,36 @@ $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 [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Used to create button that does not have the default browser button styles
+///
+/// @example scss - Example SCSS Usage
+///   .button {
+///     @include unstyled($hoverable: true, $css-modules: false);
+///   }
+///
+/// @param {Boolean} hoverable [false] - Pass-through to
+/// `interaction.surface($hoverable)`
+/// @param {Boolean} css-modules [false] - Pass-through to
+/// `interaction.surface($css-modules)`
+/// @param {Boolean} box-shadow [interaction.$focus-box-shadow] - Pass-through
+/// to `interaction.surface($box-shadow)`
 @mixin unstyled(
   $hoverable: false,
   $css-modules: false,
@@ -118,11 +255,26 @@ $variables: (
     $box-shadow: $box-shadow
   );
 
-  background-color: transparent;
-  border-width: 0;
-  display: inline-flex;
+  & {
+    background-color: transparent;
+    border-width: 0;
+    display: inline-flex;
+  }
 }
 
+/// Used to apply the text button styles to an element and most likely an
+/// internal only mixin.
+///
+/// @example scss - Example SCSS Usage
+///   .button {
+///     @include text-styles;
+///
+///     align-items: center;
+///     border-width: 0;
+///     display: inline-flex;
+///     flex-shrink: 0;
+///     justify-content: center;
+///   }
 @mixin text-styles {
   @include icon.set-var(size, $text-icon-size);
   @include set-var(border-radius, $text-border-radius);
@@ -134,6 +286,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 +317,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - 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 +395,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 +407,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 +426,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 +458,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/button/styles.d.ts

@@ -0,0 +1,104 @@
+import { type ThemeColor } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-button-background-color"?: string;
+        "--rmd-button-color"?: string;
+        "--rmd-button-border-radius"?: string | number;
+        "--rmd-button-contained-background-color"?: string;
+        "--rmd-button-contained-color"?: string;
+        "--rmd-button-text-horizontal-padding"?: string | number;
+        "--rmd-button-text-vertical-padding"?: string | number;
+        "--rmd-button-text-min-height"?: string | number;
+        "--rmd-button-text-min-width"?: string | number;
+        "--rmd-button-icon-size"?: string | number;
+        "--rmd-button-icon-radius"?: string | number;
+    }
+}
+/**
+ * When this is set to `"text"`, the size of the button will be determined by
+ * the content and will be more block-like. Icons can still be rendered in
+ * `"text"` buttons and will have spacing automatically applied between other
+ * content in the button.
+ *
+ * When this is set to `"icon"`, the button will be equal height/width and
+ * circular.
+ */
+export type ButtonType = "text" | "icon" | "icon-square";
+/**
+ * One of the valid material design default button themes that can be used. This
+ * will update the general look and feel by updating the colors within the
+ * button while the `ButtonThemeType` will update the borders or box shadow.
+ */
+export type ButtonTheme = ThemeColor | "clear" | "disabled";
+/**
+ * When this is set to `"flat"`, the button will have no `background-color`,
+ * `border`, and `box-shadow`. It will only set the `color` to the
+ * {@link ButtonTheme}.
+ *
+ * When this is set to `"outline"`, the button will have no `background-color`,
+ * but gain a `border` and `color` set to the {@link ButtonTheme}.
+ *
+ * When this is set to `"contained"`, the button will set the `background-color`
+ * to the {@link ButtonTheme}, add some `box-shadow`, and set the `color` to
+ * either `#000` or `#fff`. (The `color` defaults to whichever value has the
+ * highest contrast ratio with the `background-color`)
+ */
+export type ButtonThemeType = "flat" | "outline" | "contained";
+/** @since 6.0.0 */
+export interface ButtonClassNameThemeOptions {
+    className?: string;
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /**
+     * @see {@link ButtonTheme} for information about the different types.
+     * @defaultValue `"text"`
+     */
+    buttonType?: ButtonType;
+    /** @defaultValue `"clear"` */
+    theme?: ButtonTheme;
+    /**
+     * @see {@link ButtonThemeType} for information about the theming behavior.
+     * @defaultValue `"flat"`
+     */
+    themeType?: ButtonThemeType;
+    /**
+     * This will display the button as an icon button until the tablet breakpoint
+     * which will then display as a button with an icon.
+     *
+     * @defaultValue `false`
+     */
+    responsive?: boolean;
+    /**
+     * @defaultValue `"normal"`
+     */
+    iconSize?: "small" | "normal" | "large";
+}
+/**
+ * @since 6.0.0
+ */
+export interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {
+    /** @defaultValue `false` */
+    pressed?: boolean;
+    pressedClassName?: string;
+}
+/**
+ * Creates a button theme based on the button theming props. This is really just
+ * used so that other elements like clickable `<div>`s or `<input type="file">`
+ * can look like buttons.
+ *
+ * @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.
+ * @since 6.0.0 This used to be called `buttonThemeClassNames`.
+ */
+export declare function button(options?: ButtonClassNameOptions): string;
+/** @since 6.0.0 */
+export interface ButtonUnstyledClassNameOptions {
+    className?: string;
+}
+/**
+ * This requires the `$disable-unstyled-utility-class` to be `false` to use.
+ *
+ * @since 6.0.0
+ */
+export declare function buttonUnstyled(options?: ButtonUnstyledClassNameOptions): string;

package/dist/button/styles.js

@@ -0,0 +1,64 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-button");
+/**
+ * Creates a button theme based on the button theming props. This is really just
+ * used so that other elements like clickable `<div>`s or `<input type="file">`
+ * can look like buttons.
+ *
+ * @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.
+ * @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;
+    const disabled = propDisabled || propTheme === "disabled";
+    const text = buttonType === "text" && !responsive && !iconSize;
+    const icon = !text;
+    const outline = themeType === "outline";
+    const contained = themeType === "contained";
+    const clear = theme === "clear";
+    const isThemed = !disabled && !clear;
+    let textColor;
+    let outlineColor;
+    let backgroundColor;
+    if (isThemed && !contained) {
+        textColor = theme;
+    } else if (disabled) {
+        textColor = "text-disabled";
+    }
+    if (isThemed && contained) {
+        backgroundColor = theme;
+    }
+    if (outline) {
+        outlineColor = clear ? "greyscale" : theme;
+    }
+    return cnb(styles({
+        text,
+        icon,
+        "icon-square": buttonType === "icon-square",
+        disabled,
+        contained: !disabled && contained,
+        pressed: contained && pressed,
+        responsive,
+        small: icon && iconSize === "small",
+        large: icon && iconSize === "large"
+    }), pressedClassName, cssUtils({
+        surface: true,
+        textColor,
+        outlineColor,
+        backgroundColor
+    }), className);
+}
+/**
+ * This requires the `$disable-unstyled-utility-class` to be `false` to use.
+ *
+ * @since 6.0.0
+ */ export function buttonUnstyled(options = {}) {
+    const { className } = options;
+    return cnb("rmd-button-unstyled", className);
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/styles.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\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","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","buttonUnstyled"],"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;AAOA;;;;CAIC,GACD,OAAO,SAASa,eACdxB,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEW,SAAS,EAAE,GAAGX;IAEtB,OAAOL,IAAI,uBAAuBgB;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,26 +9,26 @@ 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,
- *   Card,
- *   CardContent,
- *   CardFooter,
- *   CardHeader,
- *   CardTitle,
- *   CardSubtitle,
- *   Typography,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Card } from "@react-md/core/card/Card";
+ * import { CardContent } from "@react-md/core/card/CardContent";
+ * import { CardFooter } from "@react-md/core/card/CardFooter";
+ * import { CardHeader } from "@react-md/core/card/CardHeader";
+ * import { CardTitle } from "@react-md/core/card/CardTitle";
+ * import { CardSubtitle } from "@react-md/core/card/CardSubtitle";
+ * import { Typography } from "@react-md/core/typography/Typography";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -51,6 +52,9 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardClassName
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
+ * @see {@link https://next.react-md.dev/components/card | Card Demos}
+ * @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>>;