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

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/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/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

@@ -26,8 +26,6 @@ export interface FontIconProps
 }
 
 /**
- * **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.

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

@@ -21,8 +21,6 @@ export interface MaterialIconProps
 }
 
 /**
- * **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

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.
  *

package/src/icon/SVGIcon.tsx

@@ -73,8 +73,6 @@ export interface SVGIconProps
 }
 
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  */

package/src/icon/TextIconSpacing.tsx

@@ -104,8 +104,6 @@ export interface TextIconSpacingProps {
 }
 
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *

package/src/icon/styles.ts

@@ -117,7 +117,7 @@ export function icon(options: IconClassNameOptions): string {
       svg: isSvg,
       font: isFont || isMaterial,
       symbol: isSymbol,
-      vab: inline,
+      vam: inline,
       dense,
     }),
     isSymbol && `material-symbols-${family}`,

package/src/interaction/RippleContainer.tsx

@@ -16,8 +16,6 @@ export interface RippleContainerProps extends ProvidedRippleContainerProps {
 }
 
 /**
- * **Server Component**
- *
  * This component should generally only be used internally within `react-md`
  * unless you are implementing a custom component interaction with
  * `useElementInteraction`.

package/src/layout/LayoutNav.tsx

@@ -4,8 +4,9 @@ import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import {
   DEFAULT_SHEET_CLASSNAMES,
   DEFAULT_SHEET_TIMEOUT,
-} from "../sheet/Sheet.js";
-import { sheet, type BaseSheetClassNameOptions } from "../sheet/styles.js";
+  sheet,
+  type BaseSheetClassNameOptions,
+} from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type TransitionActions,

package/src/layout/useHorizontalLayoutTransition.ts

@@ -1,6 +1,6 @@
 "use client";
 import { cnb } from "cnbuilder";
-import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
+import { DEFAULT_SHEET_TIMEOUT } from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type CSSTransitionHookReturnValue,

package/src/layout/useLayoutTree.ts

@@ -4,7 +4,7 @@ import { type TreeProps } from "../tree/Tree.js";
 import {
   type DefaultTreeItemNode,
   type TreeData,
-  type TreeItemDefaultIds,
+  type TreeDefaultIds,
   type TreeItemNode,
 } from "../tree/types.js";
 import { type TreeImplementation } from "../tree/useTree.js";
@@ -75,7 +75,7 @@ export interface LayoutTreeOptions<
   /**
    * @defaultValue `getParentIds(pathname, navItems)`
    */
-  defaultExpandedIds?: TreeItemDefaultIds;
+  defaultExpandedIds?: TreeDefaultIds;
 }
 
 /**

package/src/link/Link.tsx

@@ -48,8 +48,6 @@ export interface LinkProps
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Link, Typography } from "@react-md/core";

package/src/list/List.tsx

@@ -1,35 +1,5 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
-
-const styles = bem("rmd-list");
-
-/** @since 6.0.0 */
-export interface ListClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `false` */
-  dense?: boolean;
-
-  /** @defaultValue `false` */
-  horizontal?: boolean;
-}
-
-/**
- * @since 6.0.0
- */
-export function list(options: ListClassNameOptions = {}): string {
-  const { dense = false, horizontal = false, className } = options;
-
-  return cnb(styles({ dense, horizontal }), className);
-}
+import { list } from "./listStyles.js";
 
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
@@ -64,8 +34,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
 }
 
 /**
- * **Server Component**
- *
  * The `List` component is used to render a collection of clickable actions
  * vertically or horizontally and does not include the default `ol`/`ul` styles.
  *

package/src/list/ListItem.tsx

@@ -7,23 +7,6 @@ import { ListItemChildren } from "./ListItemChildren.js";
 import { listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-item-keyline"?: string | number;
-    "--rmd-list-item-padding-h"?: string | number;
-    "--rmd-list-item-padding-v"?: string | number;
-    "--rmd-list-item-height"?: string | number;
-    "--rmd-list-item-medium-height"?: string | number;
-    "--rmd-list-item-large-height"?: string | number;
-    "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-multiline-clamp"?: string | number;
-    "--rmd-list-item-multiline-height"?: string | number;
-    "--rmd-list-item-media-size"?: string | number;
-    "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-multiline-height"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.

package/src/list/ListItemAddon.tsx

@@ -23,8 +23,6 @@ export interface ListItemAddonProps
 }
 
 /**
- * **Server Component**
- *
  * The `ListItemAddon` is used to create an addon to the left or right of the
  * text/children of a `ListItem`.
  *

package/src/list/ListItemChildren.tsx

@@ -4,8 +4,6 @@ import { ListItemText } from "./ListItemText.js";
 import { type ListItemChildrenProps } from "./types.js";
 
 /**
- * **Server Component**
- *
  * The `ListItemChildren` component is used to create a styled list item that
  * can have optional addons to the left or right of the children in the form of
  * icons, avatars, or media. The `children` can be replaced by the `primaryText`