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

package/src/card/CardContent.tsx

@@ -10,8 +10,6 @@ export interface CardContentProps
     CardContentClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and
  * removed the `disableParagraphMargin` prop.
  */

package/src/card/CardFooter.tsx

@@ -12,8 +12,6 @@ export interface CardFooterProps extends BoxProps {
 }
 
 /**
- * **Server Component**
- *
  * A simple wrapper around the {@link Box} component that applies additional
  * padding and applies `justify-content: flex-end;` by default.
  *

package/src/card/CardHeader.tsx

@@ -30,8 +30,6 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Removed the `align` prop.
  * @since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
  * `beforeAddon` and `afterAddon`.

package/src/card/CardSubtitle.tsx

@@ -19,11 +19,16 @@ export interface CardSubtitleProps extends TypographyProps {
 
   /** @defaultValue `"none"` */
   margin?: TypographyProps["margin"];
+
+  /**
+   * Set this to `null` to inherit the current color.
+   *
+   * @defaultValue `"text-secondary"`
+   */
+  textColor?: TypographyProps["textColor"];
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Extends the {@link Typography} component and removed the
  * `noWrap`/`disableSecondaryColor` props.
  */
@@ -36,6 +41,7 @@ export const CardSubtitle = forwardRef<
     as = "h6",
     type = "subtitle-2",
     margin = "none",
+    textColor = "text-secondary",
     className,
     ...remaining
   } = props;
@@ -47,6 +53,7 @@ export const CardSubtitle = forwardRef<
       as={as}
       type={type}
       margin={margin}
+      textColor={textColor}
       className={cardSubtitle({ className })}
     >
       {children}

package/src/card/CardTitle.tsx

@@ -22,8 +22,6 @@ export interface CardTitleProps extends TypographyProps {
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Extends the {@link Typography} component and removed
  * the `small`/`noWrap` props.
  */

package/src/card/styles.ts

@@ -1,6 +1,6 @@
 import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
 import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
 
 const cardStyles = bem("rmd-card");
 
@@ -130,11 +130,7 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(
-    cardStyles("subtitle"),
-    cssUtils({ textColor: "text-secondary" }),
-    className
-  );
+  return cnb(cardStyles("subtitle"), className);
 }
 
 /** @since 6.0.0 */

package/src/chip/Chip.tsx

@@ -156,8 +156,6 @@ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Chip } from "@react-md/core";

package/src/cssUtils.ts

@@ -86,7 +86,7 @@ export type TextOverflow = "allow" | "nowrap" | "ellipsis";
 
 /** @since 6.0.0 */
 export interface TextCssUtilsOptions {
-  textColor?: ThemeColor | TextColor;
+  textColor?: ThemeColor | TextColor | null;
 
   textAlign?: TextAlign;
 

package/src/dialog/DialogContainer.tsx

@@ -11,8 +11,6 @@ export interface DialogContainerProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0
  * @internal
  */

package/src/dialog/DialogContent.tsx

@@ -6,9 +6,9 @@ export interface DialogContentProps
     DialogContentClassNameOptions {}
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogContent` component should be used as a child of the `Dialog`
+ * component that applies some reasonable default styles. Look at the `Dialog`
+ * or `FixedDialog` components for example usage.
  */
 export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
   function DialogContent(

package/src/dialog/DialogFooter.tsx

@@ -6,9 +6,8 @@ export interface DialogFooterProps
     DialogFooterClassNameOptions {}
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
+ * applied. Look at the `Dialog` or `FixedDialog` components for example usage.
  */
 export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
   function DialogFooter({ children, className, align = "end", ...props }, ref) {

package/src/dialog/DialogHeader.tsx

@@ -4,9 +4,9 @@ import { dialogHeader } from "./styles.js";
 export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogHeader` component should be rendered within a `Dialog` component
+ * and generally contains the `DialogTitle`. Look at the `Dialog` or
+ * `FixedDialog` components for example usage.
  */
 export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
   function DialogHeader(props, ref) {

package/src/dialog/DialogTitle.tsx

@@ -24,9 +24,9 @@ export interface DialogTitleProps extends TypographyProps {
 }
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogTitle` component is a simple `Typography` component wrapper with
+ * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or
+ * `FixedDialog` components for example usage.
  */
 export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   function DialogTitle(

package/src/divider/Divider.tsx

@@ -23,8 +23,6 @@ export interface DividerProps
     DividerClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Divider } from "@react-md/core";

package/src/expansion-panel/ExpansionList.tsx

@@ -19,7 +19,7 @@ export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
  * @see {@link useExpansionList} for a custom implementation example if you do
  * not want to use a `<div>` for this wrapper component.
  * @since 6.0.0 Uses the new keyboard movement API and does not
- * require the `onKeyDOwn` prop to be provided.
+ * require the `onKeyDown` prop to be provided.
  */
 export const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(
   function ExpansionList(props, ref) {

package/src/expansion-panel/ExpansionPanel.tsx

@@ -1,51 +1,22 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, type CSSProperties, type ReactNode } from "react";
 import { Card, type CardProps } from "../card/Card.js";
 import { CardContent, type CardContentProps } from "../card/CardContent.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import {
   ExpansionPanelHeader,
   type ExpansionPanelHeaderProps,
 } from "./ExpansionPanelHeader.js";
-
-const styles = bem("rmd-expansion-panel");
-
-/** @since 6.0.0 */
-export interface ExpansionPanelClassNameOptions {
-  className?: string;
-
-  /**
-   * @defaultValue `false`
-   */
-  expanded?: boolean;
-
-  /**
-   * Set this to `true` to disable the `margin-top` transition between multiple
-   * panels
-   *
-   * @defaultValue `false`
-   */
-  disableTransition?: boolean;
-}
-
-/**
- * @since 6.0.0
- */
-export function expansionPanel(
-  options: ExpansionPanelClassNameOptions = {}
-): string {
-  const { className, expanded = false, disableTransition = false } = options;
-
-  return cnb(styles({ expanded, animate: !disableTransition }), className);
-}
+import { expansionPanel } from "./expansionPanelStyles.js";
 
 /**
- * @since 6.0.0 Renamed some card props and updated for the latest
- * API.
+ * @since 6.0.0 The `disableSecondaryColor` convenience prop was removed in
+ * favor of the new `contentProps` object.
+ * @since 6.0.0 The `disableParagraphMargin` prop was removed since it no longer
+ * exists on the `CardContent` component.
+ * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.
  */
 export interface ExpansionPanelProps extends CardProps {
   /**
@@ -136,8 +107,8 @@ export interface ExpansionPanelProps extends CardProps {
    * This can be used to apply additional props to the `CardContent` component
    * if needed.
    *
-   * Note: The `disableLastChildPadding` defaults to `true` in this
-   * implementation.
+   * Note: `disableSecondaryColor` and `disableLastChildPadding` default to
+   * `true` in this implementation.
    *
    * @example
    * ```tsx
@@ -145,7 +116,7 @@ export interface ExpansionPanelProps extends CardProps {
    *   style: {},
    *   className: "some-class-name",
    *   disablePadding: true,
-   *   disableSecondaryColor: true,
+   *   disableSecondaryColor: false,
    *   disableLastChildPadding: false,
    *   // whatever else
    * }}

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -81,7 +81,6 @@ export interface ExpansionPanelHeaderProps
 }
 
 /**
- * **Server Component**
  * This is mostly an internal component, but can also be used to implement a
  * custom header implementation if needed. This might really be a client
  * component in practice since the `onClick` prop must be provided.

package/src/expansion-panel/expansionPanelStyles.ts

@@ -0,0 +1,33 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-expansion-panel");
+
+/** @since 6.0.0 */
+export interface ExpansionPanelClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `false`
+   */
+  expanded?: boolean;
+
+  /**
+   * Set this to `true` to disable the `margin-top` transition between multiple
+   * panels
+   *
+   * @defaultValue `false`
+   */
+  disableTransition?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function expansionPanel(
+  options: ExpansionPanelClassNameOptions = {}
+): string {
+  const { className, expanded = false, disableTransition = false } = options;
+
+  return cnb(styles({ expanded, animate: !disableTransition }), className);
+}

package/src/form/Fieldset.tsx

@@ -35,8 +35,6 @@ export function fieldset(options: FieldsetClassNameOptions = {}): string {
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Removed the `legend`, `legendStyle`,
  * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`
  * yourself manually instead of using a prop.

package/src/form/FormMessage.tsx

@@ -9,8 +9,6 @@ import {
 } from "./types.js";
 
 /**
- * **Server Component**
- *
  * The `FormMessage` component is used to create additional helper messages or
  * error messages and generally placed below the related `TextField`. If a
  * `length` (of the `value`) and `maxLength` are provided, a counter will also

package/src/form/FormMessageContainer.tsx

@@ -18,7 +18,6 @@ export interface FormMessageContainerProps
 }
 
 /**
- * **Server Component**
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
  * and renders the {@link FormMessage} component.
  *

package/src/form/FormMessageCounter.tsx

@@ -16,8 +16,6 @@ export interface FormMessageCounterProps
 }
 
 /**
- * **Server Component**
- *
  * This component can be used to create a "counter" within the
  * {@link FormMessage} component.
  *

package/src/form/InputToggle.tsx

@@ -285,7 +285,7 @@ export const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(
     // set on the `remaining` object to bypass the eslint rule about
     // aria-checked not being valid for textbox role
     remaining["aria-checked"] =
-      remaining["aria-checked"] ?? indeterminate ? "mixed" : undefined;
+      (remaining["aria-checked"] ?? indeterminate) ? "mixed" : undefined;
 
     return (
       <FormMessageContainer

package/src/form/InputToggleIcon.tsx

@@ -53,8 +53,6 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * @since 2.8.0
  * @since 6.0.0 Updated to use different icons for each checked state instead
  * of a css overlay hack.

package/src/form/Label.tsx

@@ -65,8 +65,6 @@ export function label(options: LabelClassNameOptions): string {
 }
 
 /**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to

package/src/form/Legend.tsx

@@ -14,8 +14,6 @@ export interface LegendProps extends TypographyProps {
 }
 
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
  * @since 6.0.0

package/src/form/NativeSelect.tsx

@@ -65,8 +65,6 @@ export interface NativeSelectProps
 }
 
 /**
- * **Server Component**
- *
  * This component is a wrapper for the native `<select>` field that applies the
  * same theming as `TextField` and `TextArea` components. This component might
  * not be used much since the `Select` offers more styling options.

package/src/form/Option.tsx

@@ -135,7 +135,7 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
     );
     const unselectedIcon = disableSelectedIcon
       ? null
-      : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;
+      : (propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON);
     const icon = selected ? selectedIcon : unselectedIcon;
 
     let leftAddon = propLeftAddon;

package/src/form/SelectedOption.tsx

@@ -16,8 +16,6 @@ export interface SelectedOptionProps extends BoxProps {
 }
 
 /**
- * **Server Component**
- *
  * This component is used to render the current option.
  *
  * @since 6.0.0

package/src/form/SliderContainer.tsx

@@ -40,8 +40,6 @@ export interface SliderContainerProps
 }
 
 /**
- * **Server Component**
- *
  * The `SliderContainer` component is mostly an internal component that is
  * built-in to the `Slider` and `RangeSlider` components to add addons to the
  * left or right of the `SliderTrack`. When vertical, it will add addons to the

package/src/form/SliderMark.tsx

@@ -15,8 +15,6 @@ export interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

package/src/form/SliderMarkLabel.tsx

@@ -31,8 +31,6 @@ export interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

package/src/form/SliderTrack.tsx

@@ -24,8 +24,6 @@ export interface SliderTrackProps
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 2.5.0
  * @since 6.0.0 Updated to be internal only.

package/src/form/SliderValueMarks.tsx

@@ -135,8 +135,6 @@ export interface SliderValueMarksProps
 }
 
 /**
- * **Server Component**
- *
  * @internal
  * @since 6.0.0
  */

package/src/form/Switch.tsx

@@ -38,8 +38,6 @@ export interface SwitchProps
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Form, Switch } from "@react-md/core";

package/src/form/SwitchTrack.tsx

@@ -20,7 +20,8 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * **Server Component**
+ * Used to create the switch track styles
+ * @internal
  */
 export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
   function SwitchTrack(props, ref) {

package/src/form/TextField.tsx

@@ -91,8 +91,6 @@ export interface TextFieldProps
 }
 
 /**
- * **Server Component**
- *
  * The structure for this component is:
  * @example Component Structure
  * ```tsx

package/src/form/TextFieldAddon.tsx

@@ -60,9 +60,7 @@ export interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {
 }
 
 /**
- * **Server Component**
- *
- * This component is used to add an an icon before or after the text field with
+ * This component is used to add an icon before or after the text field with
  * correct styling.
  */
 export const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(

package/src/icon/FontIcon.tsx

@@ -1,39 +1,47 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import {
+  forwardRef,
+  type AriaAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import { icon, type FontIconClassNameOptions } from "./styles.js";
 
+/**
+ * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the
+ * `inline` and `theme` props.
+ */
 export interface FontIconProps
-  extends HTMLAttributes<HTMLElement>,
+  extends HTMLAttributes<HTMLSpanElement>,
     FontIconClassNameOptions {
+  /** @defaultValue `true` */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
+
   /**
    * Any children to render to create the font icon. This is required for
    * material-icons.
+   *
+   * @example `<FontIcon>clear</FontIcon>`
    */
   children?: ReactNode;
 }
 
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
- * If you are using another font icon library that does not always create icons
- * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
- * `forceSize` and `forceFontSize` props to fix the sizing issues.
- *
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
   function FontIcon(props, ref) {
     const {
-      className,
-      children,
       "aria-hidden": ariaHidden = true,
+      iconClassName = "material-icons",
       dense = false,
       theme,
-      iconClassName = "material-icons",
+      className,
+      children,
       ...remaining
     } = props;
 

package/src/icon/IconRotator.tsx

@@ -42,8 +42,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
 }
 
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */

package/src/icon/MaterialIcon.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
-import { type MaterialIconName } from "./material.js";
+import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
@@ -7,14 +7,31 @@ import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 export interface MaterialIconProps
   extends HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
+  /**
+   * The icon name to use
+   */
+  name: MaterialIconName;
+
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
-  name: MaterialIconName;
+
+  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */
+  family?: MaterialIconFamily;
   children?: never;
 }
 
 /**
- * **Server Component**
+ * The `MaterialIcon` component is used for rendering a material icon using the
+ * Google Fonts stylesheet (handled separately). This is mostly a convenience
+ * wrapper around the `FontIcon` that will catch typos for the supported icon
+ * names.
+ *
+ * @example Simple Example
+ * ```tsx
+ * <MaterialIcon name="3k" />
+ * <MaterialIcon name="favorite" theme="primary" />
+ * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
+ * ```
  *
  * @since 6.0.0
  */
@@ -32,9 +49,9 @@ export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
 
     return (
       <span
-        ref={ref}
-        aria-hidden={ariaHidden}
         {...remaining}
+        aria-hidden={ariaHidden}
+        ref={ref}
         className={icon({
           type: "material",
           family,

package/src/icon/MaterialSymbol.tsx

@@ -33,7 +33,6 @@ export interface MaterialSymbolProps
 }
 
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *