@react-md/core 1.0.0-next.0

package/src/button/_button.scss

@@ -0,0 +1,340 @@
+@use "sass:list";
+@use "sass:map";
+@use "../utils";
+@use "../theme/a11y";
+@use "../theme/theme";
+@use "../icon/icon";
+@use "../box-shadows";
+@use "../media-queries/media-queries";
+@use "../interaction/interaction";
+@use "../progress/progress";
+@use "../overlay/overlay";
+@use "../typography/typography";
+
+$disable-everything: false !default;
+$disable-text: false !default;
+$disable-icon: false !default;
+$disable-icon-square: false !default;
+$disable-contained: false !default;
+$disable-contained-pressed-elevation: false !default;
+$disable-contained-interaction-colors: interaction.$light-surface-base-background-color
+  == interaction.$dark-surface-base-background-color !default;
+$disable-floating: false !default;
+$disable-floating-absolute-position: false !default;
+$disable-circular-progress: progress.$disable-circular !default;
+$disable-async: $disable-circular-progress !default;
+$disable-unstyled-utility-class: false !default;
+
+$text-border-radius: 0.5rem !default;
+$text-horizontal-padding: 1rem !default;
+$text-vertical-padding: 0 !default;
+$text-min-height: 2.25rem !default;
+$text-min-width: 4rem !default;
+$text-icon-size: 1.125rem !default;
+
+$icon-border-radius: 50% !default;
+$icon-square-border-radius: $text-border-radius !default;
+$icon-size: auto !default;
+$icon-small-size: icon.$size - 0.25rem !default;
+$icon-large-size: icon.$size + 0.25rem !default;
+$icon-font-size: icon.$size !default;
+$icon-padding: 0.5em !default;
+
+$contained-elevation: 2 !default;
+$contained-pressed-elevation: 4 !default;
+$clear-contained-background-color: theme.$light-theme-surface-color !default;
+$clear-contained-color: a11y.contrast-color(
+  $clear-contained-background-color
+) !default;
+
+$circular-progress-size: icon.get-var(size) !default;
+
+$floating-margin: 1.5rem !default;
+$floating-z-index: utils.$temporary-element-z-index !default;
+// set this below the app bar
+$floating-absolute-z-index: 5 !default;
+$floating-positions: (
+  tl: (
+    left: $floating-margin,
+    top: $floating-margin,
+  ),
+  tr: (
+    right: $floating-margin,
+    top: $floating-margin,
+  ),
+  bl: (
+    bottom: $floating-margin,
+    left: $floating-margin,
+  ),
+  br: (
+    bottom: $floating-margin,
+    right: $floating-margin,
+  ),
+) !default;
+
+$var-lookup: (
+  background-color: (
+    var: --rmd-button-background-color,
+    value: transparent,
+  ),
+  color: (
+    var: --rmd-button-color,
+    value: null,
+  ),
+  border-radius: (
+    var: --rmd-button-border-radius,
+    value: null,
+  ),
+  contained-background-color: (
+    var: --rmd-button-contained-background-color,
+    value: $clear-contained-background-color,
+  ),
+  contained-color: (
+    var: --rmd-button-contained-color,
+    value: $clear-contained-color,
+  ),
+  text-horizontal-padding: (
+    var: --rmd-button-text-horizontal-padding,
+    value: $text-horizontal-padding,
+  ),
+  text-vertical-padding: (
+    var: --rmd-button-text-vertical-padding,
+    value: $text-vertical-padding,
+  ),
+  text-min-height: (
+    var: --rmd-button-text-min-height,
+    value: $text-min-height,
+  ),
+  text-min-width: (
+    var: --rmd-button-text-min-width,
+    value: $text-min-width,
+  ),
+  icon-size: (
+    var: --rmd-button-icon-size,
+    value: $icon-size,
+  ),
+  icon-font-size: (
+    var: --rmd-button-icon-font-size,
+    value: $icon-font-size,
+  ),
+  icon-border-radius: (
+    var: --rmd-button-icon-radius,
+    value: $icon-border-radius,
+  ),
+  fab-offset: (
+    var: --rmd-fab-offset,
+    value: utils.scrollbar-size(),
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "button var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "button var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin unstyled(
+  $hoverable: false,
+  $css-modules: false,
+  $box-shadow: interaction.$focus-box-shadow
+) {
+  @include interaction.surface(
+    $hoverable: $hoverable,
+    $css-modules: $css-modules,
+    $box-shadow: $box-shadow
+  );
+
+  background-color: transparent;
+  border-width: 0;
+  display: inline-flex;
+}
+
+@mixin text-styles {
+  @include icon.set-var(size, $text-icon-size);
+  @include set-var(border-radius, $text-border-radius);
+  @include utils.map-to-styles(typography.$button-styles);
+  @include use-var(min-height, text-min-height);
+  @include use-var(min-width, text-min-width);
+
+  border: 0;
+  padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    .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;
+        }
+      }
+
+      @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;
+        }
+
+        @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-large-size {
+          &--large {
+            font-size: $icon-large-size;
+          }
+        }
+      }
+
+      &--responsive {
+        @include media-queries.tablet-media {
+          @include text-styles;
+
+          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);
+      }
+
+      @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;
+          }
+
+          @include set-var(
+            background-color,
+            get-var(contained-background-color)
+          );
+          @include set-var(color, get-var(contained-color));
+        }
+      }
+
+      @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);
+        }
+
+        &--async-overlay {
+          > * {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    @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-absolute-position {
+          &--absolute {
+            @include set-var(fab-offset, 0px);
+
+            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;
+                  right: calc(#{$value} + #{get-var(fab-offset)});
+                }
+
+                left: $value;
+              } @else if $property == right {
+                @include utils.rtl {
+                  left: $value;
+                  right: auto;
+                }
+
+                right: calc(#{$value} + #{get-var(fab-offset)});
+              } @else {
+                #{$property}: #{$value};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/button/buttonStyles.ts

@@ -0,0 +1,174 @@
+import { cnb } from "cnbuilder";
+import {
+  cssUtils,
+  type OutlineColor,
+  type TextColor,
+  type ThemeColor,
+} from "../cssUtils.js";
+import { bem } from "../utils/bem.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;
+  }
+}
+
+const styles = bem("rmd-button");
+
+/**
+ * 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";
+
+/** @remarks \@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";
+}
+
+/**
+ * @remarks \@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.
+ * @remarks \@since 6.0.0 This used to be called `buttonThemeClassNames`.
+ */
+export function button(options: ButtonClassNameOptions = {}): string {
+  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: ThemeColor | TextColor | undefined;
+  let outlineColor: OutlineColor | undefined;
+  let backgroundColor: ThemeColor | undefined;
+  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
+  );
+}

package/src/button/buttonUnstyledStyles.ts

@@ -0,0 +1,19 @@
+import { cnb } from "cnbuilder";
+
+/** @remarks \@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
+ */
+export function buttonUnstyled(
+  options: ButtonUnstyledClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb("rmd-button-unstyled", className);
+}

package/src/card/Card.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { card, type CardClassNameOptions } from "./styles.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-card-background-color"?: string;
+    "--rmd-card-color"?: string;
+    "--rmd-card-secondary-color"?: string;
+  }
+}
+
+/**
+ * @remarks \@since 6.0.0 Extends the {@link CardClassNameOptions}.
+ */
+export interface CardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    CardClassNameOptions {}
+
+/**
+ * **Server Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Button,
+ *   Card,
+ *   CardContent,
+ *   CardFooter,
+ *   CardHeader,
+ *   CardTitle,
+ *   CardSubtitle,
+ *   Typography,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>Main Title</CardTitle>
+ *         <CardSubtitle>A subtitle</CardSubtitle>
+ *       </CardHeader>
+ *       <CardContent>
+ *         <Typography margin="none">
+ *           Some paragraph of text.
+ *         </Typography>
+ *       </CardContent>
+ *       <CardFooter>
+ *         <Button>Action 1</Button>
+ *         <Button>Action 2</Button>
+ *       </CardFooter>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 Removed the deprecated `raiseable` prop
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  function Card(props, ref) {
+    const {
+      children,
+      className,
+      bordered = false,
+      raisable = false,
+      fullWidth = false,
+      ...remaining
+    } = props;
+
+    return (
+      <div
+        {...remaining}
+        ref={ref}
+        className={card({
+          className,
+          bordered,
+          raisable,
+          fullWidth,
+        })}
+      >
+        {children}
+      </div>
+    );
+  }
+);

package/src/card/CardContent.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cardContent, type CardContentClassNameOptions } from "./styles.js";
+
+/**
+ * @remarks
+ * \@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
+ * removed the `disableParagraphMargin` prop.
+ */
+export interface CardContentProps
+  extends HTMLAttributes<HTMLDivElement>,
+    CardContentClassNameOptions {}
+
+/**
+ * **Server Component**
+ *
+ * @remarks
+ * \@since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
+ * removed the `disableParagraphMargin` prop.
+ */
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  function CardContent(props, ref) {
+    const {
+      children,
+      className,
+      disablePadding = false,
+      disableSecondaryColor = false,
+      disableLastChildPadding = false,
+      ...remaining
+    } = props;
+
+    return (
+      <div
+        {...remaining}
+        ref={ref}
+        className={cardContent({
+          className,
+          disablePadding,
+          disableSecondaryColor,
+          disableLastChildPadding,
+        })}
+      >
+        {children}
+      </div>
+    );
+  }
+);

package/src/card/CardFooter.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+import { Box, type BoxProps } from "../box/Box.js";
+import { type BoxJustifyContent } from "../box/styles.js";
+import { cardFooter } from "./styles.js";
+
+/** @remarks \@since 6.0.0 */
+export interface CardFooterProps extends BoxProps {
+  /**
+   * @defaultValue `"flex-end"`
+   */
+  justify?: BoxJustifyContent;
+}
+
+/**
+ * **Server Component**
+ *
+ * A simple wrapper around the {@link Box} component that applies additional
+ * padding and applies `justify-content: flex-end;` by default.
+ *
+ * @remarks \@since 6.0.0
+ */
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  function CardFooter(props, ref) {
+    const { className, children, justify = "flex-end", ...remaining } = props;
+
+    return (
+      <Box
+        {...remaining}
+        ref={ref}
+        className={cardFooter({ className })}
+        justify={justify}
+      >
+        {children}
+      </Box>
+    );
+  }
+);