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

package/dist/app-bar/_app-bar.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
@@ -59,6 +60,9 @@ $vertical-padding: 0 !default;
 
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
+// 3rem is the icon-button's default size. can't use the variables since it's
+// based on font-size now and `em`
+$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
 $variables: (height, surface-background-color, surface-color);
 
@@ -121,17 +125,14 @@ $variables: (height, surface-background-color, surface-color);
 
     .rmd-app-bar {
       @include use-var(height);
+      @include box.set-var(gap, $gap);
+      @include box.set-var(padding, $vertical-padding $horizontal-padding);
 
-      align-items: center;
-      display: flex;
       // since app bars can appear a lot in full page dialogs, setting these flex
       // values allows it be be a direct replacement of the `DialogHeader`
       // component without all the offsets and additional styles needed for fixed
       // app bars.
       flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
 
       @if not $disable-fixed or not $disable-sticky {
         &--fixed {
@@ -237,10 +238,7 @@ $variables: (height, surface-background-color, surface-color);
         }
 
         &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          @include utils.auto-rtl(margin-left, $nav-keyline);
         }
       }
     }

package/dist/avatar/Avatar.d.ts

@@ -12,7 +12,7 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, AvatarClassNameOptions {
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
     /**
      * This should be an image `src` attribute to create an avatar from. When this
      * prop is defined, you should not add any children to the avatar as the

package/dist/badge/_badge.scss

@@ -12,8 +12,9 @@ $disable-secondary-theme: false !default;
 
 $size: 1.5rem !default;
 $font-size: 0.625rem !default;
-$offset-top: 0 !default;
-$offset-right: 0 !default;
+$offset: 0 !default;
+$offset-top: $offset !default;
+$offset-right: $offset !default;
 $border-radius: 50% !default;
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
@@ -101,9 +102,13 @@ $variables: (
     @include set-var(greyscale-background-color, $greyscale-background-color);
     @include set-var(greyscale-color, $greyscale-color);
     @include set-var(size, $size);
-    @include set-var(offset, 0);
-    @include set-var(offset-top, get-var(offset));
-    @include set-var(offset-right, get-var(offset));
+    @include set-var(offset, $offset);
+    @if $offset != $offset-top {
+      @include set-var(offset-top, $offset-top);
+    }
+    @if $offset != $offset-right {
+      @include set-var(offset-right, $offset-right);
+    }
   }
 }
 
@@ -113,8 +118,8 @@ $variables: (
       @include utils.map-to-styles($typography);
       @include use-var(height, size);
       @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right));
-      @include use-var(top, offset-top);
+      @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+      @include use-var(top, offset-top, get-var(offset));
 
       align-items: center;
       border-radius: $border-radius;

package/dist/button/TooltippedButton.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type ProvidedTooltipProps, type TooltipOptions, type TooltippedElementEventHandlers } from "../tooltip/useTooltip.js";
+import { type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+    /** @defaultValue `"icon"` */
+    buttonType?: ButtonType;
+    /**
+     * The tooltip children to render. When this is falsey, the tooltip event
+     * listeners will not be enabled and the tooltip will never display.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Any additional props to pass to the `Tooltip` component (normally styling
+     * props).
+     */
+    tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+    /**
+     * Any additional tooltip options to pass to {@link useTooltip}. The most
+     * common options would be:
+     *
+     * ```ts
+     * tooltipOptions={{
+     *   overflowOnly: true,
+     *
+     *   // whatever values you want for these
+     *   hoverTimeout: 0,
+     *   leaveTimeout: 150,
+     *   defaultPosition: "left",
+     * }}
+     * ```
+     */
+    tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const TooltippedButton: import("react").ForwardRefExoticComponent<TooltippedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/card/ClickableCard.d.ts

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

package/dist/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -99,14 +101,12 @@ $variables: (background-color, color, secondary-color);
       max-width: 100%;
 
       @if not $disable-raisable {
-        @include utils.mouse-only {
-          &--raisable {
-            @include box-shadows.elevation-transition(
-              $raisable-start-elevation,
-              $raisable-end-elevation,
-              "&:hover"
-            );
-          }
+        &--raisable {
+          @include box-shadows.elevation-transition(
+            $raisable-start-elevation,
+            $raisable-end-elevation,
+            "&:hover"
+          );
         }
       }
 
@@ -129,6 +129,12 @@ $variables: (background-color, color, secondary-color);
         }
       }
 
+      @if not $disable-clickable {
+        &--clickable {
+          @include interaction.surface;
+        }
+      }
+
       &__header {
         align-items: center;
         column-gap: $header-spacing;
@@ -140,7 +146,7 @@ $variables: (background-color, color, secondary-color);
         @include typography.text-overflow;
 
         flex: 1 1 auto;
-        min-width: 1;
+        min-width: 0;
       }
 
       // does not require custom styles

package/dist/card/styles.d.ts

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

package/dist/dialog/_dialog.scss

@@ -20,8 +20,16 @@ $disable-footer-flex-end: false !default;
 $elevation: 16 !default;
 $z-index: utils.$temporary-element-z-index !default;
 
-$background-color: theme.theme-get-var(surface-color) !default;
-$color: theme.theme-get-var(text-primary-color) !default;
+$background-color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(surface-color),
+  null
+) !default;
+$color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(text-primary-color),
+  null
+) !default;
 
 $min-width: 17.5rem !default;
 $horizontal-margin: 2.5rem !default;
@@ -41,8 +49,6 @@ $content-padding: 1.5rem !default;
 $footer-padding: 0.5rem !default;
 
 $variables: (
-  background-color,
-  color,
   min-width,
   horizontal-margin,
   vertical-margin,
@@ -55,6 +61,7 @@ $variables: (
 
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "dialog");
+
   @if $fallback {
     @return var(#{$var}, #{$fallback});
   }
@@ -74,8 +81,6 @@ $variables: (
 
 @mixin variables {
   @if not $disable-everything {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
     @include set-var(min-width, $min-width);
     @include set-var(horizontal-margin, $horizontal-margin);
     @include set-var(vertical-margin, $vertical-margin);
@@ -114,9 +119,9 @@ $variables: (
 
     .rmd-dialog {
       @include box-shadows.box-shadow($elevation);
-      @include use-var(background-color);
-      @include use-var(color);
 
+      background-color: $background-color;
+      color: $color;
       display: flex;
       flex-direction: column;
       max-height: 100%;
@@ -140,13 +145,21 @@ $variables: (
       }
 
       @if not $disable-focus-outline {
-        @include utils.keyboard-only {
-          &--outline:focus {
-            // Note: Do not use the `interaction-outline` mixin +
-            // `interaction.set-var(interaction.$focus-color)` like normal focus
-            // elements since it'll make all focusable children update with the
-            // outline color as well
-            outline: interaction.get-var(focus-color) solid
+        // Note: Do not use the `interaction-outline` mixin +
+        // `interaction.set-var(interaction.$focus-color)` like normal focus
+        // elements since it'll make all focusable children update with the
+        // outline color as well
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &--outline:focus {
+              outline: interaction.get-var(focus-color) solid
+                interaction.get-var(focus-width);
+            }
+          }
+        } @else {
+          &--outline:focus-visible {
+            outline: interaction.get-var(focus-color)
+              solid
               interaction.get-var(focus-width);
           }
         }

package/dist/divider/_divider.scss

@@ -7,9 +7,8 @@ $disable-everything: false !default;
 $disable-vertical: false !default;
 $disable-inset: false !default;
 
-$size: 0.0625rem !default;
-// this is doubled since the `hr` element applies the size for border top and bottom
-$vertical-size: $size * 2 !default;
+$size: 0.0625em !default;
+$border-size: $size * 2 !default;
 $max-size: 100% !default;
 $inset: 4rem !default;
 $spacing: 0.25rem auto !default;
@@ -22,7 +21,7 @@ $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
 $variables: (
   size,
-  vertical-size,
+  border-size,
   color,
   spacing,
   vertical-spacing,
@@ -61,15 +60,17 @@ $variables: (
   }
 }
 
-@mixin border-style($position) {
-  $property: "border-#{$position}";
+@mixin border-style($position: null) {
+  $property: if(not $position, border, "border-#{$position}");
+  $var-name: if(not $position, size, border-size);
 
-  #{$property}: get-var(size) solid get-var(color);
+  #{$property}: get-var($var-name) solid get-var(color);
 }
 
 @mixin variables {
   @if not $disable-everything {
     @include set-var(size, $size);
+    @include set-var(border-size, $border-size);
     @include set-var(color, $color);
     @include set-var(spacing, $spacing);
     @include set-var(max-size, $max-size);
@@ -79,7 +80,6 @@ $variables: (
     }
 
     @if not $disable-vertical {
-      @include set-var(vertical-size, $vertical-size);
       @include set-var(vertical-spacing, $vertical-spacing);
     }
   }
@@ -111,10 +111,9 @@ $variables: (
         &--vertical {
           @include border-style(left);
           @include use-var(height, max-size);
-          @include use-var(width, vertical-size);
+          @include use-var(width, size);
           @include use-var(margin, vertical-spacing);
 
-          border-bottom: 0;
           display: inline-block;
         }
       }

package/dist/draggable/useDraggable.d.ts

@@ -217,6 +217,17 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement> ex
      * Decrement the {@link value} by {@link DraggableOptions.step}.
      */
     decrement(): void;
+    /**
+     * THe current percentage the `value` is within the range.
+     *
+     * ```ts
+     * const percentage =
+     *   dragging && withinOffsetParent
+     *     ? : dragPercentage
+     *     : getPercentage({ min, max, value });
+     * ```
+     */
+    percentage: number;
     /**
      * A ref that **Must** be passed to the element that should be draggable.
      */
@@ -225,29 +236,7 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement> ex
      * This value will only update while dragging with a mouse or touch and should
      * be used for the positioning styles while dragging.
      *
-     * @example
-     * Inline Styles
-     * ```ts
-     * import { getPercentage, useDraggable } from "@react-md/core";
-     *
-     * const min = 120;
-     * const max = 256;
-     * const { value, dragging, dragPercentage } = useDraggable({
-     *   min,
-     *   max,
-     *   defaultValue: min,
-     * });
-     *
-     * const percentage = dragging
-     *   ? dragPercentage
-     *   : getPercentage({ min, max, value });
-     *
-     * const style: CSSProperties = {
-     *   left: `${percentage * 100}%`<>
-     * };
-     *
-     * // do stuff
-     * ```
+     * Note: The {@Link percentage} will use this value while dragging.
      */
     dragPercentage: number;
     /**

package/dist/draggable/utils.d.ts

@@ -1,6 +1,5 @@
-import type { MouseEvent, RefObject, TouchEvent } from "react";
-import type { UseStateInitializer } from "../types.js";
-import type { ClientPositionEvent, ClientPositionOptions } from "../utils/getClientPosition.js";
+import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+import { type ClientPositionEvent, type ClientPositionOptions } from "../utils/getClientPosition.js";
 /**
  * @internal
  */
@@ -28,6 +27,8 @@ interface RelativeDragPositionOptions extends DragPositionOptions {
     min: number;
     max: number;
     step: number;
+    rangeMin: number;
+    rangeMax: number;
 }
 /**
  * @internal
@@ -47,8 +48,6 @@ interface UpdateDragPositionOptions extends Omit<RelativeDragPositionOptions, "c
     event: ClientPositionEvent;
     nodeRef: RefObject<HTMLElement>;
     focus?: boolean;
-    rangeMin: number;
-    rangeMax: number;
     isDragStart: boolean;
     setValue(value: number): void;
     setDragging(dragging: boolean): void;
@@ -59,18 +58,6 @@ interface UpdateDragPositionOptions extends Omit<RelativeDragPositionOptions, "c
  * @internal
  */
 export declare const updateDragPosition: (options: UpdateDragPositionOptions) => void;
-/**
- * @internal
- */
-export interface DraggableDefaultValueOptions {
-    min: number;
-    max: number;
-    defaultValue: UseStateInitializer<number> | undefined;
-}
-/**
- * @internal
- */
-export declare function getDraggableDefaultValue(options: DraggableDefaultValueOptions): number;
 /**
  * @internal
  * @remarks \@since 6.0.0

package/dist/expansion-panel/_expansion-panel.scss

@@ -2,6 +2,7 @@
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
+@use "../theme/theme";
 
 $disable-everything: false !default;
 $disable-margin-top-transition: false !default;
@@ -12,6 +13,9 @@ $button-spacing: icon.$spacing !default;
 $rotate-from: icon.$rotate-from !default;
 $rotate-to: icon.$rotate-to !default;
 
+$box-shadow-overlay-height: 10px !default;
+$box-shadow-overlay-bottom: -6px !default;
+
 @mixin styles {
   @if not $disable-everything {
     // does not require custom styles
@@ -28,23 +32,28 @@ $rotate-to: icon.$rotate-to !default;
         }
       }
 
-      // once firefox supports the `:has` selector, I can handle most of this in CSS instead of javascript:
-      // &:where(:not(.rmd-expansion-panel--expanded)):has(+ .rmd-expansion-panel) {
-      //   border-bottom-left-radius: 0;
-      //   border-bottom-right-radius: 0;
-      //   position: relative;
+      @if not utils.$disable-has-selectors {
+        // this makes it so that the box-shadow between closed panels is not
+        // visible by covering it in a small overlay of the current
+        // background-color
+        &:where(:not(.rmd-expansion-panel--expanded)):has(
+            + .rmd-expansion-panel
+          ) {
+          position: relative;
+
+          &::after {
+            @include theme.theme-use-var(background-color);
 
-      //   &::after {
-      //     background: #fff;
-      //     bottom: -5px;
-      //     content: "";
-      //     height: 8px;
-      //     left: 0;
-      //     position: absolute;
-      //     right: 0;
-      //     z-index: 1;
-      //   }
-      // }
+            bottom: $box-shadow-overlay-bottom;
+            content: "";
+            height: $box-shadow-overlay-height;
+            left: 0;
+            position: absolute;
+            right: 0;
+            z-index: 1;
+          }
+        }
+      }
     }
 
     // .rmd-expansion-panel__header {

package/dist/expansion-panel/useExpansionPanels.d.ts

@@ -20,7 +20,7 @@ export interface ExpansionPanelHookOptions {
      *
      * @defaultValue `false`
      */
-    preventAllClosed?: boolean;
+    preventAllCollapsed?: boolean;
     /**
      * This is a convenience option to disable the expansion transition for all
      * panels.
@@ -29,7 +29,7 @@ export interface ExpansionPanelHookOptions {
      */
     disableTransition?: boolean;
     /**
-     * @defaultValue `preventAllClosed ? ["expansion-panel-" + useId() + "-1"] : []`
+     * @defaultValue `preventAllCollapsed ? ["expansion-panel-" + useId() + "-1"] : []`
      */
     defaultExpandedIds?: UseStateInitializer<string[]>;
     /**
@@ -58,7 +58,9 @@ export interface ExpansionPanelHookOptions {
     disableContentPadding?: boolean;
 }
 /** @remarks \@since 6.0.0 */
-export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "id" | "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding">;
+export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding"> & {
+    id?: string;
+};
 /**
  * @param indexOrPanelId - This should either be a DOM id to use for the panel
  * or the panel's index.

package/dist/form/MenuItemInputToggle.d.ts

@@ -47,7 +47,7 @@ export interface BaseMenuItemInputToggleProps extends HTMLAttributes<HTMLLIEleme
     /** @defaultValue `"auto"` */
     height?: ListItemHeight;
     /** @defaultValue `false` */
-    threeLines?: boolean;
+    multiline?: boolean;
     /** @defaultValue `false` */
     disableTextChildren?: boolean;
     /** @defaultValue `false` */